CSS align-content Property
The align-content property modifies the flex-wrap property's functionality. It pulls away flex lines. It's used to describe the alignment of lines within a flexible container. This property controls how each flex line within a flexbox is aligned and is only applicable if flex-wrap: wrap is used, i.e. if there are several lines of flexbox items present.
Note : This attribute has no impact unless there are numerous lines of objects!
Tip: To align the elements on the main-axis, use the justify-content property (horizontally).
Syntax
Property Values
| Value | Description |
|---|---|
| stretch | The default setting. Lines expand to fill the remaining space. |
| center | Lines are packed in the flex container's center. |
| flex-start | Lines are packed at the beginning of the flex container. |
| flex-end | Lines are packed at the end of the flex container. |
| space-between | In the flex container, the lines are uniformly dispersed. |
| space-around | Lines are dispersed uniformly in the flex container, with half-size gaps on either end. |
| space-evenly | Lines are placed uniformly in the flex container, with equal space surrounding them. |
| initial | Returns the value of this property to its default value. |
| inherit | Returns the value of this property to its default value. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| align-content | 21.0 | 28.0 | 11.0 | 9.0 | 12.1 |