justify-content

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

Defined in the CSS box alignment module, justify-content applies to multicol containers, flex containers, and grid containers. The property does not apply to and has no effect on block containers.

This property shares many keyword values with the align-content property, but not all! justify-content isn’t involved in baseline alignment, and therefore does not take baseline values.

In flex layouts, the property defines how positive free space is distributed between or around flex items along the main axis. This property impacts the space between elements in a line, not the space between lines. The alignment is done after the lengths and auto margins are applied, which means that when one or more flex items in a line have a flex-grow factor greater than 0, the property has no effect as there is no space to distribute along that line. Also, as stretching along the main axis is controlled by flex, the stretch value behaves as flex-start.

Syntax example: justify-content: center;