0

Выполнил небольшую начальную разметку, с использованием flexbox. Напишите пожалуйста, насколько всё правильно, и что нужно переделать или вообще убрать (я новичок). Заранее спасибо всем за ответы!!! 

https://codepen.io/Krutov/pen/bLJKQR

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100%;
    min-height: 100vh;
    background-color: aqua;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.wrapper{
    width: 100%;
    max-width: 900px;
    box-shadow: 0 0 50px 15px blue;
    background-color: burlywood;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
}

.header{
    width: 880px;
    max-width: 100%;
    border: 1px solid green;
    background-color: cadetblue;
    display: flex;
    margin-bottom: 10px;
}

.footer{
    width: 880px;
    max-width: 100%;
    border: 1px solid blue;
    background-color: cadetblue;
    display: flex;
    margin-top: 10px;
}

.left_sidebar{
    display: flex;
    width: 140px;
    max-width: 100%;
    border: 1px solid gold;
    background-color: darkmagenta;
}

.content{
    display: flex;
    border: 1px solid gray;
    width: 580px;
    max-width: 100%;
    background-color: chocolate;
    flex-grow: 2;
    margin: 0 10px;
}

.right_sidebar{
    display: flex;
    width: 140px;
    max-width: 100%;
    border: 1px solid gold;
    background-color: darkmagenta;
}

div{
    color: green;
    font-size: 20px;
    font-family: fantasy;
}

div:not(.wrapper){
    justify-content: center;
    align-items: center;
}
<div class="wrapper">

    <div class="header">
        HEADER
    </div>

    <div class="left_sidebar">
        LEFT_SIDEBAR
    </div>

    <div class="content">
        CONTENT
    </div>

    <div class="right_sidebar">
        RIGHT_SIDEBAR
    </div>

    <div class="footer">
        FOOTER
    </div>

</div>

5
  • 2
    Расползлось при ширине сниппета...
    – Qwertiy
    3 мар 2018 в 20:35
  • А можно чуть чуть подробнее)) (я новичёк).
    – Max Krutov
    3 мар 2018 в 21:03
  • Чтобы оценить, правильно ли верстка реализована, должно быть четкое описание того, чего автор хотел добить... О некоторых неверных решениях, Саша Вдодович, уже отметил в своем ответе, хотя не не со всем согласен в его ответе... Советую переформулировать вопрос...
    – Air
    4 мар 2018 в 2:24
  • Понял Вас! Благодарю)
    – Max Krutov
    4 мар 2018 в 18:08
  • А почему вы не использовали семантические теги, такие как main, header и footer? Для доступности интерфейсов очень важна семантика)) 6 мар 2018 в 13:13

1 ответ 1

3
height: 100%;
min-height: 100vh;

Бесполезно, достаточно просто height: 100vh

.header{
    width: 880px;
    max-width: 100%;
    border: 1px solid green;
    background-color: cadetblue;
    display: flex;
    margin-bottom: 10px;
}

Достаточно будет и width: 100% и margin-bottom: 10px; также плохая практика, лучше уж margin-top:10px у контента.

   div{
    color: green;
    font-size: 20px;
    font-family: fantasy;
}

Лучше эти атрибуты оставить в body, просто представь: у тебя появился . И вот еще: постоянно использовать <div> - плохая практика, прочитай про семантику.
Например тут

P.S. прошу не кидать палками, я также пока учусь как и ТС. Как говорят, чем смог.

P.S. Удачи тебе в твоих начинаниях!

10
  • Почему собсна margin-bottom "плохая практика"?
    – entithat
    3 мар 2018 в 20:22
  • Классно! такая оценка и анализ - это то что мне нужно! А если оставить height: 100vh, высота ведь и так будет увеличиваться при необходимости, правильно?
    – Max Krutov
    3 мар 2018 в 20:31
  • Кстати, если делаю width: 100% у .header, то при сужении страницы, он просто уменьшается очень сильно, а если crjv,bybhjdfnm c % и px, блоки все послушно перескакивают вниз, и нет полосы прокрутки.
    – Max Krutov
    3 мар 2018 в 20:34
  • height:100vh - высота равна высоте екрана Детальней: learn.javascript.ru/css-units Второе предложения не понял. Как по мне, margin-bottom у хедера так себе уже потому, что "а зачем он там нужен то" ?? 3 мар 2018 в 20:44
  • margin-bottom у хедера чтобы отделить его от контента на 10 px. Во втором предложении (извините что не так написал) я имел ввиду если скомбинировать проценты и пиксели то блок более послушный, и нет полосы прокрутки
    – Max Krutov
    3 мар 2018 в 21:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.