CSS justify-content Property
Example
Leave space around each item in a flexbox container:
div {
display: flex;
justify-content: space-around;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers following -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| justify-content | 29.0 <br>21.0 -webkit- | 11.0 | 28.0 <br>18.0 -moz- | 9.0 <br>6.1 -webkit- | 17.0 |
Definition and Usage
The justify-content property is used to align the flex items along the main axis (horizontal).
Tip: Use the align-content property to align items along the cross axis (vertical).
| Default value: | flex-start |
|---|---|
| Inherited: | no |
| Animatable: | no. See animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.justifyContent="space-between" Try it |
/* Alignment */
justify-content: center; /* Center alignment */
justify-content: start; /* Start alignment */
justify-content: end; /* End alignment */
justify-content: flex-start; /* Start alignment */
justify-content: flex-end; /* End alignment */
justify-content: left; /* Align to the left edge */
justify-content: right; /* Align to the right edge */
/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* Distribution of flex items */
justify-content: space-between; /* Evenly distribute items with first at start and last at end */
justify-content: space-around; /* Evenly distribute items with equal space around each */
justify-content: space-evenly; /* Evenly distribute items with equal space between each */
justify-content: stretch; /* Stretch 'auto'-sized items to fit the container */
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
CSS Syntax
Property Values
| Value | Description | Test |
|---|---|---|
| flex-start | Default value. Items are positioned at the beginning of the container. | Test » |
| flex-end | Align from the end of the line. | Test » |
| center | Center alignment. | Test » |
| space-between | Evenly distribute elements, with the first element at the start and the last element at the end. | Test » |
| space-evenly | Evenly distribute elements with equal spacing between each element. | Test » |
| space-around | Evenly distribute elements with equal space around each element. | Test » |
| initial | Set the property to its default value. See initial | Test » |
| inherit | Inherit the property from the parent element. See inherit |
Related Articles
CSS Reference: align-content Property
CSS Reference: align-items Property
CSS Reference: align-self Property