为什么我应该在显示无之后使用justify-content：space-between？

Question

public static Bitmap encodeToQrCode(String text, int width, int height) {
    QRCodeWriter writer = new QRCodeWriter();
    BitMatrix matrix = null;
    try {
        matrix = writer.encode(text, BarcodeFormat.QR_CODE, 400, 400);
    } catch (WriterException ex) {
        ex.printStackTrace();
    }
    Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
    for (int x = 0; x < width; x++) {
        for (int y = 0; y < height - 1; y++) {
            bmp.setPixel(x, y, matrix.get(x, y) ? Color.BLACK : Color.WHITE);
        }
    }
    return bmp;
}

如果我删除

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

在我的CSS中

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

我会得到这个结果

而不是 结果：

我试着搞清楚，但无法找到答案，谢谢。

Answer 1

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

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

不幸的是，当使用flexbox而不是浮动（需要清除）时，这些伪元素会成为flex-children，因此在将其他子元素放置在flexed parent（容器）中时会考虑到这些因素。

最简单的覆盖灵活性的方法就是告诉他们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>