我可以避免使用此Flexbox包裝紙嗎？

Question

我不太確定是否需要包裝來分隔容器的最大寬度。

header的寬度爲100％，而.wrapper的分隔寬度爲1000px。

有沒有什麼辦法可以避免使用.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

將所有的div最大寬度，即等於1000像素

Answer 3

的整體設計，你做了什麼看起來像你的包裝將永遠是500像素根據媒體查詢，每個元素的寬度都是靜態的。

您可以修改您的媒體查詢並刪除額外的包裝和彈性值。

下面摘錄的行爲就像你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