html - 为什么我应该在 display none 之后使用 justify-content :space-between?

Question

<header class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="http://qlip.in/images/qlip.png" alt="logo" height="50" width="50">
      </a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="navbar-menu" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

如果我删除

.navbar-default .container:before, .navbar-default .container:after {
  display:none
}

在我的 CSS 中

.navbar-default {
  background-color: #722872;
  border: none;
  border-radius: 0;
  height: 80px;
}

.navbar-default .container {
  display: flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
}

.navbar-default .container:before, .navbar-default .container:after {
  display:none
}

.navbar-brand {
  height: 80px;
}

.navbar-brand img {
  max-height: 50px;
}

nav .navbar-nav li a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
}

我会得到这个结果

代替这个结果:

我想弄清楚，但找不到答案，谢谢。

Answer 1

这是因为 Bootstrap 使用伪元素作为 clearfix

.container::before, .container::after {
   display: table;
   content: " ";
}

不幸的是，当使用 flexbox 而不是 float (需要清除)时，这些伪元素变成了 flex-children，因此在 flexed parent(容器)中布置其他子元素时会被考虑在内。

覆盖 flex 特性的最简单方法就是告诉他们display:none。

.navbar-default {
  background-color: #722872;
  border: none;
  border-radius: 0;
  height: 80px;
}
.navbar-default .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.navbar-default .container:before,
.navbar-default .container:after {
  display: none;
}
.navbar-brand {
  height: 80px;
}
.navbar-brand img {
  max-height: 50px;
}
nav .navbar-nav li a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="http://qlip.in/images/qlip.png" alt="logo" height="50" width="50" />
      </a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="navbar-menu" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#portfolio">Portfolio</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>