The align-content property in Flexbox

The align-content property in Flexbox controls how extra space is distributed between and around flex lines (rows or columns) when there is multiple lines of items (due to wrapping).

⚠ Important:
Only works if flex-wrap: wrap is set (otherwise, there's only one line).
Applies to the cross axis (opposite of justify-content).
If flex-direction: row → controls vertical spacing.
If flex-direction: column → controls horizontal spacing.

Possible Values:
Value Behavior (for flex-direction: row)
stretch (default) Lines stretch to fill remaining space.
flex-start Lines pack at the top of the container.
flex-end Lines pack at the bottom.
center Lines are vertically centered.
space-between First line at top, last at bottom, equal space between.
space-around Equal space around each line.
space-evenly Equal space between lines and container edges.

Видео The align-content property in Flexbox канала ZBU