CSS align-content: Align Multiple Flex Lines Explained
What is align-content in CSS Flexbox?
The CSS align-content property distributes space between and around multiple flex lines on the cross axis. Think of it as justify-content, but for the lines themselves instead of the items. It works only when the container has more than one line, which means flex-wrap: wrap (or wrap-reverse) must be set and the container needs extra cross-axis space (usually a fixed height).
Syntax
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
}The default value is normal, which behaves like stretch in flexbox.
Values explained
| Value | Behavior |
|---|---|
| stretch (default) | Lines grow equally to fill the container height |
| flex-start | Lines packed at the start of the cross axis |
| flex-end | Lines packed at the end of the cross axis |
| center | Lines grouped in the center |
| space-between | First line at start, last at end, equal space between lines |
| space-around | Equal space around each line |
| space-evenly | Equal space between lines and at both edges |
align-content vs align-items (very important)
| Feature | align-items | align-content |
|---|---|---|
| Aligns | Items inside each line | The lines themselves as a group |
| Needs wrap? | No | Yes, needs multiple lines |
| Needs extra cross-axis space? | Yes (for visible effect) | Yes |
| Applies to single-line containers? | Yes | No effect |
Why align-content sometimes does nothing
- flex-wrap is nowrap, so there is only one line.
- The container has no extra height, so no free cross-axis space exists.
- All items fit in one line anyway.
How it combines with align-items
First align-content places the lines in the container. Then align-items aligns each item inside its own line. With the default stretch, lines grow to fill the container and items stretch inside them.
Real-world use cases
- Tag clouds and chip lists inside a fixed-height box.
- Multi-row image galleries with controlled vertical spacing.
- Calendar-like layouts built with wrapping rows.
- Dashboards with wrapped widgets in a fixed area.
Common mistakes
- Using align-content without flex-wrap: wrap.
- Not setting a height, so there is nothing to distribute.
- Confusing it with align-items and expecting item-level alignment.
- Using it in a single-line flex container and thinking it is a browser bug.
Best practices
- Add flex-wrap: wrap first, then set a container height, then test align-content.
- Use align-content: flex-start to stop lines from stretching apart.
- Use gap for fixed spacing; use align-content for distributing leftover space.
- Consider CSS Grid if you need strict rows and columns.
Tailwind CSS equivalents
content-start, content-end, content-center, content-between, content-around, content-evenly, content-stretch (also content-normal).
Trending keywords related to this topic
align-content vs align-items, align-content space-between, CSS flexbox multi-line, align-content not working, flex-wrap align-content, Tailwind content-between, flexbox cheat sheet 2026, CSS alignment properties, flexbox interview questions.
Frequently Asked Questions
Why is align-content not working?
Because the container is not multi-line (no flex-wrap: wrap) or has no extra height.
What is the default of align-content?
normal, which acts as stretch in flexbox.
Is align-content the same as align-items?
No. align-items aligns items within a line, align-content aligns the lines within the container.
Does align-content work in CSS Grid?
Yes, it aligns the grid rows within the container block axis.
One-click copy
Code blocks ke Copy button se snippets copy karein. Cheat Sheet mein saari align-content values mojood hain.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
The items wrap into multiple lines but are stretched apart. Use align-content so the wrapped lines are grouped together in the vertical center of the container.
Press Run to execute.
Show expected output
Two lines of items are grouped in the vertical center of the 200px container (align-content: center).This is a self-check — compare your result with the expected output above.
Was this page helpful?