Understanding align-content in Flexbox
The align-content property in Flexbox controls the spacing and alignment of multiple lines of flex items along the cross axis (perpendicular to the main axis). It only works when there is extra space in the container and when the flex items wrap onto multiple lines.
align-contentaffects how multiple lines of items are spaced within the flex container, not individual items.It only applies when
flex-wrapis set towraporwrap-reverse.Common values include:
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 along the cross axis.space-between: lines are evenly distributed, first at the start and last at the end.space-around: lines have equal space around them.space-evenly: lines are evenly distributed with equal space between and around them.stretch(default): lines stretch to fill the container along the cross axis.
In this example, the .container wraps its items into multiple lines. The align-content: space-between property distributes the lines evenly along the container's vertical space.
Use
align-contentonly when you have multiple lines of flex items (i.e.,flex-wrap: wrap).Combine with
justify-contentandalign-itemsto achieve precise control of both axes.Experiment with different values to understand how spacing changes along the cross axis.
Avoid using
align-contentwhen all items fit on a single line—it will have no effect.