The align-content property modifies the behavior of the flexible container wrapping. It determines how lines are spaced within the container along the cross-axis.

The Prerequisite: Wrapping

This is the most common pitfall: align-content has no effect on a single-line flex container. For this property to work, your container must have:

• display: flex (or grid)
• flex-wrap: wrap
• A height (or min-height) greater than the content needs, creating extra space to distribute.

Common Values

• flex-start: Packs lines to the start of the cross-axis.
• flex-end: Packs lines to the end.
• center: Packs lines in the middle.
• space-between: Distributes lines; first line at start, last at end.
• space-around: Distributes lines with equal space around them.
• stretch: (Default) Lines stretch to take up the remaining space.

align-items vs align-content

Use align-items when: You want to align items within a single line (or for every line individually relative to that line's height).

Use align-content when: You have multiple lines and want to control the spacing *between* or *around* those lines within the container.