CSS justify-content Property

CSS's justify-content property describes the alignment of the flexible box container. It is the space between and around content items along the main axis of a browser-displayed flex container.

This property cannot be used to describe items or containers that run vertically. We can use the align-items property to align the items vertically.

The alignment is possible after applying the lengths and auto margins properties, i.e., if there is at least one flexible element in a Flexbox layout with a flex-grow property other than 0, it will not impact or have any effect because there will be no available space.




Property Values

Value Description
flex-start The default value. Items are placed at the top of the container.
flex-end Items are arranged at the container's apex.
center Items are arranged in the container's center.
space-between Items will be separated by space.
space-around There will be space before, between, and after the items.
space-evenly Items will have an equal amount of space around them.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
justify-content 29.0
21.0 -webkit-
18.0 -moz-
6.1 -webkit-
11.0 17.0