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.

Key Points

1
align-content affects how multiple lines of items are spaced within the flex container, not individual items.
2
It only applies when flex-wrap is set to wrap or wrap-reverse.
3
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.

Example: Using align-content

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.

Best Practices

1
Use align-content only when you have multiple lines of flex items (i.e., flex-wrap: wrap).
2
Combine with justify-content and align-items to achieve precise control of both axes.
3
Experiment with different values to understand how spacing changes along the cross axis.
4
Avoid using align-content when all items fit on a single line—it will have no effect.

Difficulty: 3/10

Topics: flexbox layout, multi-line alignment, container spacing

Scenario Questions

0-2 years experience

1
You're building a mobile menu with 5 items stacked vertically, and you want them evenly spaced. You set align-content: space-between, but they're all bunched at the top. What’s wrong?
2
A junior dev set align-content: center on a flex container with only one row of items, and expects the items to be vertically centered. Why isn’t it working?
3
How would you fix a layout where flex items are overflowing the container because align-content is set to flex-start and the container height is constrained?

2-5 years experience

1
Our dashboard has a sidebar with collapsible sections — when collapsed, the remaining items jump to the top. We tried align-content: center, but it doesn’t help. What’s the real issue, and how do you fix it?
2
A designer says the cards in our grid layout look ‘too tight’ at mobile width. You set align-content: space-around, but the spacing looks uneven on some devices. Why, and what’s your next step?
3
We’re migrating from a table-based layout to flexbox. The old layout had even vertical spacing between rows — align-content: space-between seems right, but now the last row is cut off on small screens. What’s happening?

5-8 years experience

1
We have a dynamic content carousel with variable-height cards in a multi-line flex container. Users report inconsistent vertical spacing across browsers. How do you debug and standardize align-content behavior across engines?
2
Our component library uses align-content: stretch for a responsive card grid, but it breaks when nested inside a scrollable container with overflow-y. What’s the root cause, and how do you design a fallback?
3
A senior engineer insists align-content should never be used in production because it’s ‘unreliable’. How do you respond with evidence from real edge cases, and when would you actually avoid it?

8+ years experience

1
We’re standardizing our design system across 12 product teams. Some use align-content for vertical spacing, others use margin hacks or grid. How do you decide whether to standardize on align-content, and what migration risks do you surface?
2
Our legacy UI framework uses align-content in a way that breaks when embedded in shadow DOMs or iframes. How do you architect a future-proof layout system that avoids this dependency while maintaining backward compatibility?
3
A cross-team initiative wants to replace all flexbox layouts with CSS Grid. How do you evaluate whether align-content’s behavior is a net positive or technical debt in our current component ecosystem?

Follow-up Questions

❓What happens if you set align-content on a single-line flex container?
❓How does align-content differ from align-items in a multi-line layout?
❓Why might align-content: stretch not work as expected in a responsive grid?