The justify-content property defines how the browser distributes space between and around content items along the main axis of their container.

flex-start: Items are positioned at the start of the container.

flex-end: Items are positioned at the end of the container.

center: Items are positioned at the center of the container.

space-between: Items are evenly distributed in the line; first item is on the start line, last item on the end line

space-around: Items are evenly distributed in the line with equal space around them.

space-evenly: Items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

See the Pen flexbox justify-content by brandon ewoldt (@bewoldt) on CodePen.