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.