Property Description
The align-content property aligns the flexible container's items when the items do not use all available space on the cross-axis (vertically).
This property has the following syntax:
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Property Values
| Value | Description | stretch | (default) Items are stretched to fit the container |
|---|---|
| center | Items are positioned at the center of the container |
| flex-start | Items are positioned at the beginning of the container |
| flex-end | Items are positioned at the end of the container |
| space-between | Items are positioned with space between the lines |
| space-around | Items are positioned with space before, between, and after the lines |
| initial | Specifies that the value of the property should be set to the default value |
| inherit | Specifies that the value of the property should be inherited from the parent element |
Examples
The following example shows the basic use of this property:
div {
display: flex;
flex-flow: row wrap;
align-content: space-around;
}Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 21.0 | 28.0 | 11.0 | 7.0 -webkit- | 12.1 |
Miscellaneous Information
| Inherited: | No |
|---|---|
| Defined In: | CSS3 |
| Default Value: | stretch |