CSS align content Property
CSS align-content Property
The align-content property is used to modify the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it is used to align flex lines. For this property to work, multiple lines of items must be present.
Syntax:-
Its syntax is:- align-content: stretch | center | flex-end | flex-start | space-around | space-between | initial | inherit;
Further Explanation:-
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. |