The justify-content is like flex-basis related to the use of flexbox.

It allows for the even spacing of flex items inside a flex container.

Consider a simple HTML list:

<ul>
  <li><a href="">Home</a></li>
  <li><a href="">News</a></li>
  <li><a href="">Products and Services</a></li>
  <li><a href="">About Us</a></li>
 </ul>

To space the list out evenly we could apply:

ul{
  display:flex;
  justify-content:space-between;
  list-style:none;
}

The <li> elements are now flex items and by applying justify-content with a value of space-between they are automatically evenly spaced.

See the Pen List to Navigation with Flexbox by Martin Cooper (@mustbebuilt) on CodePen.0

Read more on Flex Box.