57. Flex Container Property: align-content (Multi-line Alignment)
align-content controls the spacing between lines of flex items when the container has multiple lines (flex-wrap: wrap). It controls distribution along the cross axis, similar to how justify-content works for the main axis.
Note: This property has no effect when flex-wrap: nowrap or when the container has only one line of items.
Available Values
The values are almost identical to justify-content, but they apply to the lines of content, not the items within the lines.
| Value | Description |
|---|---|
stretch (default) | Lines stretch to take up the remaining space. |
flex-start | Lines are packed at the start of the cross axis. |
flex-end | Lines are packed at the end of the cross axis. |
center | Lines are centered in the container. |
space-between | Lines are distributed evenly, with no space at the start/end. |
space-around | Lines are distributed with equal space around each line. |
Example: Centering Wrapped Content
If you have three lines of content, and you want them to be clustered in the vertical center of the container:
css .container { display: flex; flex-wrap: wrap; height: 500px; /* Requires a defined height for alignment to be noticeable / align-content: center; / Centers all lines of items vertically */ }
Recap:
justify-content: Spacing/alignment of items along the main axis.align-items: Alignment of individual items across the cross axis.align-content: Spacing/alignment of wrapped lines across the cross axis.