Align Content
Control alignment of lines in multi-line flex containers.
The alignContent property aligns a flex container's lines within the flex container when there is extra space on the cross-axis. This property has no effect on single-line flex containers (i.e. where flexWrap is NoWrap).
Values
| Value | Description |
|---|---|
Stretch | Default. Lines stretch to take up the remaining space. |
FlexStart | Lines packed to the start of the container. |
FlexEnd | Lines packed to the end of the container. |
Center | Lines packed to the center of the container. |
SpaceBetween | Lines evenly distributed; the first line is at the start, the last line at the end. |
SpaceAround | Lines evenly distributed with equal space around them. |
Example
Loading Preview…