添加容器 div 会删除 flexbox [重复]答案

【问题标题】：Adding container div removes flexbox [duplicate]添加容器 div 会删除 flexbox [重复]
【发布时间】：2021-05-03 02:51:15
【问题描述】：

我正在使用 flexbox 创建一个简单的导航栏，但是每当我在 header 内添加一个容器 div 以使 width 80% 和 center 它与 margin:0 auto flexbox 的 justify-content 停止工作。

html,
body {
  margin: 0;
  padding: 0;
  background-color: #24252A;
  color: white;
  height: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  background: gray;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.logo img {
  height: 50px;
}

<header>
  <div class="container">

    <div class="brand">
      <h1>Site</h1>

    </div>

    <div class="logo">
      <img src="https://banner2.cleanpng.com/20180422/srw/kisspng-logo-web-development-clip-art-site-vector-5add4dee019ee5.7373764915244528460066.jpg" alt="">
    </div>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

</header>

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

flex 被应用于header 的直接子代。当您添加 container div 时，它将应用于该 div，但不适用于它的任何子级。要实现您想要的，请将 flex 规则移动到 container 而不是 header。

html,
body {
  margin: 0;
  padding: 0;
  background-color: #24252A;
  color: white;
  height: 100%;
}

header {
  background: gray;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}

.logo img {
  height: 50px;
}

<body>

  <header>
    <div class="container">

      <div class="brand">
        <h1>Site</h1>

      </div>

      <div class="logo">
        <img src="https://banner2.cleanpng.com/20180422/srw/kisspng-logo-web-development-clip-art-site-vector-5add4dee019ee5.7373764915244528460066.jpg" alt="">
      </div>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>

  </header>


</body>

【讨论】：