Могу ли я избежать этой оболочки flexbox?

Question

Я не уверен, нужна ли мне оболочка для ограничения максимальной ширины контейнера.

header имеет ширину 100%, а .wrapper ограничивает максимальную ширину 1000 пикселей.

Есть ли способ избежать использования .wrapper div?

body { margin: 0; } 
 
header { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: DarkRed; 
 
} 
 
.header-wrapper { 
 
    margin: auto; 
 
    max-width: 500px; 
 
    padding: 10px 0; 
 
} 
 
#logo, #tagline, #menu { 
 
    margin: auto; 
 
    padding: 5px; 
 
} 
 
#logo { 
 
    flex: 2; 
 
    background-color: Crimson; 
 
} 
 
#tagline { 
 
    flex: 5; 
 
    background-color: Salmon; 
 
} 
 
#menu { 
 
    flex: 3; 
 
    background-color: IndianRed; 
 
} 
 
@media (min-width: 768px){ 
 
    .header-wrapper { 
 
    display: flex; 
 
    } 
 
}

<header> 
 
    <div class="header-wrapper"> 
 
    <div id="logo">Logo</div> 
 
    <div id="tagline">Tagline</div> 
 
    <div id="menu">Menu</div> 
 
    </div> 
 
</header>

CodePen

Answer 1

Это будет зависеть от ваших конкретных нужд, нет быстрого правила о вашем точном HTML структуры, когда речь идет о разработке страницы.

Если вам нужен цвет фона, который расширяет весь текст 100% width, но вы хотите, чтобы содержимое имело скрытый барьер влево/вправо, вы, вероятно, хотите, чтобы оболочка принудительно применяла это правило барьера. в противном случае красный фон будет только шириной, чем правило 1000px (или независимо от того, что вы установили в соответствии с вашими центрированными границами)

, если вам не нужен барьер и вы хотите, чтобы элементы контента/навигации охватывали всю ширину, тогда вам не нужна обертка.

снова, это действительно до вас, в зависимости от общей конструкции компонента

Answer 2

Установить все ДИВ макс-ширину, которая равна 1000px

Answer 3

что вы сделали вид, как ваша обертка всегда будет 500px в соответствии с mediaqueries, поэтому ширина каждого элемента статична.

Вы можете изменить свои медиа-запросы и удалить дополнительную оболочку и значения гибкости.

Отрывок ниже ведут себя так же, как ваш codepen ... с оберткой меньше:

body { 
 
    margin: 0; 
 
} 
 
header { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: DarkRed; 
 
    padding: 10px 0; 
 
} 
 
#logo, 
 
#tagline, 
 
#menu { 
 
    padding: 5px; 
 
} 
 
#logo { 
 
    background-color: Crimson; 
 
} 
 
#tagline { 
 
    background-color: Salmon; 
 
} 
 
#menu { 
 
    background-color: IndianRed; 
 
} 
 
@media (min-width: 768px) { 
 
    header { 
 
    display: flex; 
 
    justify-content: center; 
 
    } 
 
    #logo { 
 
    width: 100px; 
 
    } 
 
    #tagline { 
 
    width: 250px; 
 
    } 
 
    #menu { 
 
    width: 150px; 
 
    } 
 
}

<header> 
 
    <div id="logo">Logo</div> 
 
    <div id="tagline">Tagline</div> 
 
    <div id="menu">Menu</div> 
 
</header>

http://codepen.io/gc-nomade/pen/ENqPVp