On this page
CSS align-content: Space and Align Multiple Flex Lines
What Is align-content in CSS?
The align-content property controls how multiple flex lines are positioned and spaced inside a flex container along the cross axis. It only works when the container has more than one line, which means flex-wrap must be set to wrap or wrap-reverse and the items must actually wrap. Many developers confuse align-content with align-items, so this lesson explains the difference clearly with examples.
Syntax
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}The default value is stretch (the initial value is normal, which behaves like stretch in flexbox).
When Does align-content Work?
- The container must be a flex container.
- The container must wrap its items onto two or more lines.
- The container must have extra cross-axis space, for example a fixed height in a row layout.
On a single-line flex container, align-content has no effect. Use align-items instead.
align-content vs align-items
| Property | What it aligns | Needs wrapping? |
|---|---|---|
| align-items | Items inside each flex line | No |
| align-content | The flex lines as a group | Yes, multiple lines required |
A helpful way to remember: align-items aligns items, align-content aligns content (the whole block of lines).
align-content Values Explained
align-content: stretch (default)
The lines grow to share the extra cross-axis space equally. Items on each line then get aligned using align-items inside their stretched line.
align-content: flex-start
All lines are packed together at the start of the cross axis (the top in a row layout) with no extra space between them.
align-content: flex-end
All lines are packed at the end of the cross axis (the bottom in a row layout).
align-content: center
All lines are grouped in the middle of the container with equal free space above and below.
align-content: space-between
The first line is at the start, the last line at the end, and free space is distributed between lines.
align-content: space-around
Equal space around each line. The space at the edges is half the space between lines.
align-content: space-evenly
The same amount of space is placed between lines and at both edges.
Practical Example: Wrapped Tag Cloud
If you have a fixed-height container with many wrapped items, align-content: flex-start keeps the lines tight at the top instead of stretching them apart. This is a very common fix when wrapped rows have unexpected large gaps between them.
Why Are My Wrapped Rows Far Apart?
This is one of the most common flexbox questions. When a wrapping flex container has a fixed height, the default align-content: stretch distributes the extra height among the lines, which creates large gaps. To pack the lines together, set align-content: flex-start.
align-content with gap
The gap property (row-gap in this case) sets the minimum space between lines. align-content then positions the lines and distributes any leftover space.
Common Mistakes
- Using align-content on a single-line container. Nothing happens.
- Forgetting flex-wrap: wrap. Without wrapping, there is only one line.
- No extra height. With height: auto, the container is exactly as tall as its lines, so there is no free space.
- Confusing it with justify-content. justify-content works on the main axis, align-content on the cross axis.
FAQ
What is the difference between align-items and align-content?
align-items aligns items inside each line. align-content aligns the lines themselves and requires multiple lines.
Why is align-content not working?
Most likely there is only one line, or the container has no extra cross-axis space.
Does align-content work with CSS Grid?
Yes. In Grid, align-content distributes the grid tracks inside the container.
Key Takeaways
- align-content positions multiple flex lines on the cross axis.
- It needs flex-wrap: wrap and extra container height.
- Default stretch can create big gaps, so use flex-start to pack lines.
- Seven values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
The tag cloud below wraps into several rows inside a container with a fixed height, and the rows are spread far apart. Use a single align-content declaration to pack all rows tightly at the top. Then try align-content: center and space-between and observe the difference.
Press Run to execute.
Show expected output
All tag rows are packed together at the top of the container with only the 8px gap between them.This is a self-check — compare your result with the expected output above.
Was this page helpful?