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:

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

To space the list out evenly we could apply:


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.