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.
Syntax
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- |
28.0
18.0 -moz- |
9.0
6.1 -webkit- |
11.0 | 17.0 |