English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
align-When there is extra space (vertical) on the horizontal axis, the CSS property can align elements in the flexible container to the flexible container. This property has no effect on single-line flexible containers. In addition, you can use CSS justify-contentAligns elements on the main axis (horizontal) of the property.
The following table summarizes the usage context and version history of this property.
| Default value: | stretch |
|---|---|
| Applies to: | Multi-line flexible container |
| Inheritance: | None |
| Animatable: | No.See also Animation properties. |
| CSS version: | CSS3 |
| New feature of | JavaScript syntax: object.style.alignContent="center" |
The syntax of this property is as follows:
align-content: center | flex-start | flex-end | space-between | space-around | stretch | initial | inherit
The following examples show how to use CSS's align-content property.
.flex-container {
/* Safari Browser */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
/* Standard Syntax */
display: flex;
flex-flow: row wrap;
align-content: space-around;
}Test See‹/›The following table describes the values of this property.
| Value | Description |
|---|---|
| center | The element is located at the center of the flexible container. |
| flex-start | The element is located at the beginning of the flex container. |
| flex-end | The element is located at the end of the flex container. |
| space-between | The element is evenly distributed in the flexible container to make the space between two adjacent elements the same. |
| space-around | The element is evenly distributed in the flex container to make the space around each element (i.e., before, between, and after) the same. |
| stretch | Stretch the element to fit the flexible container. Available space is evenly distributed among all elements. This is the default value. |
| initial | Set this property to its default value. |
| inherit | If specified, the associated element uses the computed value of the align attribute of its parent element.-content. |
align-All mainstream browsers support this property. The number represents the version number of the first browser that supports the property.
|
Note: Apple Safari 7and higher versions to support this align-content property, but it needs-webkit-prefix, for example-webkit-align-content: center;
Please refer to the following tutorials:CSS Alignment.
Related Attributes: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.