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. |