Align Content Property
Last updated: 2026-09-13
align-content Align Content Property
The align-content property sets how multiple lines of flex items are aligned and spaced on the cross axis. It only takes effect when wrapping (flex-wrap: wrap) produces more than one line. It works like justify-content but acts on the cross axis and distributes the space between the lines. On a single line the property does nothing; use align-items instead.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
align-content: normal | stretch | start | end | flex-start | flex-end | center | space-between | space-around | space-evenly | baseline;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | stretch | flex-start | flex-end | center | space-between | space-around | Keyword | Multi-line cross axis alignment |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| align-content | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Warning： align-content only works in a multi-line flex layout. If the items do not wrap (single line), the property has no effect; in that case use align-items to control the cross-axis alignment.
Tip： align-content and align-items can be combined: align-content distributes the lines among themselves, while align-items aligns the items inside each line on the cross axis.
❓ FAQ
QWhat is the difference between align-content and align-items?
Aalign-items controls how the items align on the cross axis within a single line. align-content controls how the lines, as a group, are distributed on the cross axis. On a single line align-content does nothing; with multiple lines, align-items manages the items inside each line while align-content distributes the space between the lines. Both can be set at the same time because they work at different levels.
QWhy does align-content have no visible effect?
APossible reasons: the items do not wrap (single-line layout), the container has no definite height, or flex-wrap is still nowrap. align-content only works when flex-wrap: wrap produces multiple lines and the container has leftover space on the cross axis. Check flex-wrap and the container height to find the cause; a single line means there is nothing to distribute. A quick way to decide which property to use: one line means set align-items, while several wrapped lines that need spacing apart call for align-content.
QHow do I center multiple wrapped flex lines as a whole vertically?
AHandle it in two layers: set align-content: center on the container so the group of lines is centered on the cross axis (vertical). If the items within a line have different heights, also add align-items: center so the items in each line center vertically. This only works when the container has a definite height and flex-wrap: wrap produces more than one line; otherwise align-content has no effect.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Cross Axis Alignment
Controls how items align on the cross axis within a line
Main Axis Alignment
Controls how items align on the main axis
