我可以避免使用此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