CSS justify-contentProperty
Example
Whitespace is left around the items in the <div> element of the flex container:
div
{
display: flex;
justify-content: space-around;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
The number following -webkit-, -ms- or -moz- is the first version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Definition and Usage
justify-content is used to set or retrieve the alignment of flex container items along the main axis (horizontal axis).
Tip:Use the align-content property to align items on the cross axis (vertical).
| Default value: | flex-start |
|---|---|
| Inherited: | no |
| Animatable: | No. SeeAnimatable。 |
| version: | CSS3 |
| JavaScript Syntax: | object.style.justifyContent="space-between" Try it Yourself |
/* Alignment */
justify-content: center; /* Centered alignment */
justify-content: start; /* Align from the start of the line */
justify-content: end; /* Align from the end of the line */
justify-content: flex-start; /* Arranged from the starting position at the beginning of the line */
justify-content: flex-end; /* Align starting from the end of the line */
justify-content: left; /* One by one at the left edge of the alignment container */
justify-content: right; /* Elements are aligned one after another based on the right edge of the container, */
/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* How to distribute flex items */
justify-content: space-between; /* evenly distribute each element
The first element is placed at the start, the last element at the end */
justify-content: space-around; /* evenly distribute each element
Allocate the same space around each element */
justify-content: space-evenly; /* evenly distribute each element
The spacing between each element is equal */
justify-content: stretch; /* evenly distribute each element
'auto'-sized elements will be stretched to fit the size of the container */
/* overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global Values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
justify-content: center; /* Centered alignment */
justify-content: start; /* Align from the start of the line */
justify-content: end; /* Align from the end of the line */
justify-content: flex-start; /* Arranged from the starting position at the beginning of the line */
justify-content: flex-end; /* Align starting from the end of the line */
justify-content: left; /* One by one at the left edge of the alignment container */
justify-content: right; /* Elements are aligned one after another based on the right edge of the container, */
/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* How to distribute flex items */
justify-content: space-between; /* evenly distribute each element
The first element is placed at the start, the last element at the end */
justify-content: space-around; /* evenly distribute each element
Allocate the same space around each element */
justify-content: space-evenly; /* evenly distribute each element
The spacing between each element is equal */
justify-content: stretch; /* evenly distribute each element
'auto'-sized elements will be stretched to fit the size of 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
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
Property value
| Value | Description | Testing |
|---|---|---|
| flex-start | Default value. Items are arranged starting from the start position of the line. | Test » |
| flex-end | Arranges starting from the end-of-line position. | Test » |
| center | Center-aligned. | Test » |
| space-between | Each element is evenly arranged, with the first element placed at the start and the last element placed at the end. | Test » |
| space-evenly | Each element is evenly arranged, with equal spacing between elements. | Test » |
| space-around | Each element is evenly arranged, with equal space allocated around each element. | Test » |
| initial | Sets the property to its default value. Seeinitial。 | Test » |
| inherit | Inherits this property from the parent element. Seeinherit。 |
Related Articles
CSS Reference:align-content property
CSS Reference:align-items Property
CSS Reference:align-self property
other extensions