Question

我不确定我是否需要一个包装器来分隔容器的最大宽度。

header的宽度为100％，.wrapper的最大宽度为1000px。

有没有办法避免使用.wrapper div？

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

CodePen

Answer 1

这取决于您的确切需求，在设计页面时，没有关于您的确切html结构的快速规则。

如果您想要一个扩展整个100% width的背景颜色，但您希望内容具有隐藏的左/右屏障，您可能需要一个包装器来强制该屏障规则。否则，红色背景将仅与1000px规则一样宽（或者您设置的居中范围）

如果您不需要屏障并希望内容/导航项目跨越整个宽度，那么您就不需要包装。

再次，它取决于组件的整体设计

，它取决于你

Answer 2

设置所有div max-width，等于1000px

Answer 3

根据媒体查询，你所做的看起来你的包装器总是500px，所以每个元素的宽度都是静态的。

您可以修改媒体查询并删除额外的包装器和弹性值。

下面的代码段就像你的代码集一样......使用更少的包装器：

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

我可以避免使用这个flexbox包装器吗？

3 个答案: