English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
justify-The content property is used to set or retrieve the alignment of the flexible box element along the main axis (horizontal axis).
The table below provides usage instructions and version history for this property, as well as the syntax for using this property in JavaScript scripts.
| Default value: | flex-start |
|---|---|
| Applicable to: | Flexible container |
| Inheritance: | None |
| Animatable: | No.See Animation properties. |
| Version: | CSS3new feature |
| JavaScript syntax: | object.style.justifyContent="space-around" |
The syntax of this attribute is as follows:
justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit
The following examples demonstrate how to use justify-content attribute.
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
}Test and see‹/›The table below describes the value of this attribute.
| Value | Description |
|---|---|
| flex-start | The flexible items are located at the beginning of the container line. This is the default value. |
| flex-end | The flexible items are located at the end of the line. |
| center | The items are located at the center of the container. |
| space-between | The flexible items are evenly distributed along the line. |
| space-around | The flexible items are evenly distributed so that the space between two adjacent items is the same. |
| initial | Set this property to its default value. |
| inherit | If specified, the associated elements adopt the justify of their parent element-Content attribute values. |
justify-Browser compatibility of the content attribute, the numbers in the table below represent the minimum version number of the browsers that support this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS fonts,CSS units,CSS pseudo-elements.
Related properties:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.