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

Alignment Values

This property controls the horizontal alignment (in a row) or vertical alignment (in a column). Common values include:

• flex-start (default): Items are packed toward the start line.
• flex-end: Items are packed toward the end line.
• center: Items are centered along the line.

Spacing Values

You can also use this property to distribute empty space:

• space-between: Items are evenly distributed; first item is on the start line, last item on the end line.
• space-around: Items have equal space around them. Note that visually the spaces aren't equal, since the start/end items have one unit of space against the edge, but two units between items.
• space-evenly: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Best Practices

Always remember that justify-content works on the main axis. If you change flex-direction to column, this property will control the vertical alignment, not the horizontal.