Warning: Trying to access array offset on value of type null in /homepages/6/d201749245/htdocs/wpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on value of type null in /homepages/6/d201749245/htdocs/wpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

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.