CSS justify-content

This CSS property is used to align the items of the flexible box container when the items do not use all available space on the main-axis (horizontally). It defines how the browser distributes the space around and between the content items.

This CSS property can't be used to describe containers or items along the vertical axis. To align the items vertically, we have to use the align-items property.

Syntax

The default value of this property is flex-start. Let's understand its property values in detail.

Property values

• center: As its name implies, it set the position of items at the center of the container.
• flex-start: It is the default value that positioned the items at the beginning of the container.
• flex-end: It set the position of items at the end of the container.
• space-around: It positioned the items with equal spacing from each other. It evenly distributes the items in the line along with the same space around them.
• space-between: Items are evenly spaced in which the first item is at the beginning, and the last item is at the end.
• space-evenly: It also positioned the items with equal space, but the spacing from the corners differs.

Let's understand the above values by using an illustration.

Example