Example
Align the items of the flexbox's <div> element:
- div
- {
- display: flex;
- flex-flow: row wrap;
- align-content:space-around;
- }
复制
Browser support
The numbers in the table represent the version number of the first browser to support the property.
The number immediately following -webkit-, -ms- or -moz- is the first version that supports the prefixed property.
Attributes| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- |
12.1 |
Definition and Usage
The align-content property aligns items within a flex container (vertically) when the items within the flex container do not occupy all the space available on the cross axis.
Tip: Use the justify-content property to align items on the main axis (horizontal).
Note: There must be multiple lines of items in the container for this property to render the effect.
Default: Inherit: Animatable: Version: JavaScript Syntax:| stretch |
| no |
| no. See CSS3 Animation Properties , CSS3 Animation Examples . |
| CSS3 |
| object .style.alignContent="center" effect preview |
CSS syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Defaults
Value Description Test| stretch | Defaults. Items are stretched to fit the container. | Effect preview |
| center | The item is in the center of the container. | Effect preview |
| flex-start | The item is at the beginning of the container. | Effect preview |
| flex-end | Items are at the end of the container. | Effect preview |
| space-between | Items are placed in containers with spaces between rows. | Effect preview |
| space-around | Items are placed in containers with blank spaces before, between, and after each row. | Effect preview |
| initial | 设置该属性为它的默认值。请参阅 initial。 | 效果预览 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |