添加容器 div 删除 flexbox

Question

我正在使用 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>

Answer 1

flex 正在应用于 header 的直系子代。当您添加 container div 时，它会应用于它，但不会应用于它的任何子项。要实现您正在寻找的内容，请将弹性规则移动到 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>

添加容器 div 删除 flexbox

Adding container div removes flexbox

html

css

css-position

flexbox