CSS justify-content property
CSS reference manual
Leave a blank space around each of the elements of the elastic box object:
{
display: flex;
justify-content: space-around;
}
Try it out . . .
Browser support
The numbers in the table support the version number of the first browser for this property.
The number immediately after -webkit-, -ms - or -moz - is the first version that supports the prefix property.
| Property | |||||
|---|---|---|---|---|---|
| justify-content |
29.0
21.0 -webkit- |
11.0 |
28.0
18.0 -moz- |
9.0
6.1 -webkit- |
17.0 |
Definitions and usages
justify-content is used to set or retrieve the alignment of elastic box elements in the direction of the spindle (horizontal axis).
Tip: Use the align-content property to align the items (vertical) on the cross axis.
| Default: | flex-start |
|---|---|
| Inherited: | Whether |
| Animated: | Whether. See Animation . |
| Version: | CSS3 |
| JavaScript syntax: | object .style.justifyContent="space-between" Give it a try |
CSS syntax
The property value
| value | describe | test |
|---|---|---|
| flex-start | Defaults.The project is located at the beginning of the container. | test " |
| flex-end | The project is located at the end of the container. | test " |
| center | The project is located at the center of the container. | test " |
| space-between | The project is located in a blank container between each line. | test " |
| space-around | The project is located before, between, thereafter, there is a blank container. | test " |
| initial | Set this property for its default value.See initial 。 | test " |
| inherit | Inheriting this property from the parent element.See inherit 。 |
Related articles
CSS Reference Manual: align-content property
CSS Reference Manual: align-items property
CSS Reference Manual: align-self property