Why I should use after display none for 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>

if i remove

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

in my 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;
}

I will get this result

instead of This Result:

I try figure it out but can't find the answer, thank you.

score 1 · Accepted Answer · edited May 23 '17 at 12:33

It's because Bootstrap use the pseudo-elements as a clearfix

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

Unfortunately, when using flexbox instead of floats (which require clearing) these pseudo-elements become flex-children and so are accounted for when laying out the other children in the flexed parent (the container).

The simplest method of overriding the flexy nature is just to tell them to 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>

Why I should use after display none for justify-content:space-between?

1 Answers1