align-content: the property tutorials skip
Open ten flexbox cheat sheets and nine of them gloss over align-content with a footnote: “only matters with multiple lines.” That footnote hides one of the most useful properties in the spec.
What it does
Per the W3C Flexbox spec, align-content distributes extra cross-axis space between and around the flex lines. With one line there is no extra space to distribute — the line fills the container by definition — so the property is silently ignored. Add flex-wrap: wrap and a second line, and suddenly it controls the gaps.
Note the symmetry: justify-content distributes spare main-axis space between items in a line. align-content distributes spare cross-axis space between lines. align-items aligns each item within its own line. Three properties, three jobs.
The values that matter
flex-start/flex-end: lines pack to one edge.center: lines pack to the cross-axis centre.space-between: first line at the start edge, last at the end, equal gaps in between. Same algorithm as the justify-content variant.space-around: equal padding around each line, so end gaps are half the inter-line gap.space-evenly: all gaps equal, including the edges. Added in level 3 of the Box Alignment module.stretch: the default. Lines grow to fill the container.
Why stretch is the trap
The default stretch is the reason your two-line card grid has rows of unequal height. Each line stretches independently to fill its share of the cross-axis space, and within each line items use align-items to fit. If line 1 has tall content and line 2 has short, both lines still get equal share, and the short line’s items stretch vertically to match. Set align-content: flex-start and lines size to their natural height, gaps collapse to row-gap only.
The shorthand most people miss
CSS Box Alignment Level 3 introduced place-content: <align-content> <justify-content>. One declaration sets both axes. Tab Atkins discusses the rationale in the Box Alignment Level 3 draft. It works in flex and grid identically, which is the point.
The Grid parallel
In CSS Grid, align-content applies to the implicit and explicit rows when the grid has spare cross-axis space. Same property, same syntax. Once you internalise that align-content is about “rows of stuff inside a container,” you stop forgetting it exists.
Related
- justify-content vs align-items: which axis is which
- flex-wrap and the mythical line
- safe and unsafe alignment: the keyword that prevents data loss
Get FlexFrog on the App Store. Built by Moruk Labs.