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.