The align-content Property modifies the behavior of the flex-wrap property. This is similar to align-items, but instead of aligning flex items, it aligns flex lines.
Note: This property must have multiple rows of items for any effect!
Tip: Use the justify-content property to align items on the main-axis (horizontally).
| Default value: | stretch |
|---|---|
| Inherited: | no |
| Animatable: | no. |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignContent=”center” |
CSS Syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Property Values
| Value | Description | |
|---|---|---|
| stretch | Default value. Lines stretch to take up the remaining space | |
| center | Lines are packed toward the center of the flex container | |
| flex-start | Lines are packed toward the start of the flex container | |
| flex-end | Lines are packed toward the end of the flex container | |
| space-between | Lines are evenly distributed in the flex container | |
| space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | |
| space-evenly | Lines are evenly distributed in the flex container, with equal space around them | |
| initial | Sets this property to its default value. | |
| inherit | Inherits this property from its parent element. |
