时间戳

首页 > 解决方案 > 添加容器 div 会移除 flexbox

html - 添加容器 div 会移除 flexbox

问题描述

我正在使用 flexbox 创建一个简单的导航栏，但是每当我在其中添加一个容器div以header使width80% 和centerflexboxmargin:0 auto停止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>

标签： htmlcssflexboxcss-position

解决方案

flex正在应用于 的直接子级header。当您添加containerdiv 时，它将适用于该 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>

推荐阅读