align-content
Specifies the spacing and alignment between rows when flex items wrap into multiple lines within a flex container. This property only takes effect when wrapping occurs with 'flex-wrap: wrap'.
Sample Code
style.css
/* Stretch rows to fill the container (default) */
.container { display: flex; flex-wrap: wrap; align-content: stretch;}
/* Align rows to the top */
.container-start { display: flex; flex-wrap: wrap; align-content: flex-start;}
/* Center the rows */
.container-center { display: flex; flex-wrap: wrap; align-content: center;}
/* Distribute rows evenly */
.container-between { display: flex; flex-wrap: wrap; align-content: space-between;}
Available Values
| Value | Description |
|---|---|
| stretch | Stretches each row to fill the full extent of the container along the cross axis. This is the initial value. |
| flex-start | Aligns rows to the start of the cross axis. |
| flex-end | Aligns rows to the end of the cross axis. |
| center | Centers rows along the cross axis. |
| space-between | Places the first row at the start, the last row at the end, and distributes the remaining rows evenly. |
| space-around | Distributes rows with equal spacing on both sides of each row. |
| space-evenly | Distributes rows with completely equal spacing between all rows and edges. |
Specification
| Property | Details |
|---|---|
| Initial Value | stretch |
| Applies to | Multi-line flex containers (elements with 'flex-wrap: wrap') |
| Inherited | No |
| Animation | Not animatable (discrete) |
Browser Support
Chrome29 + ○
28 △27 △26 △25 △24 △23 △22 △21 △20 and earlier ×
Firefox28 + ○
27 and earlier ×
Safari9 + ○8 △
7 △6 and earlier ×
Edge12 + ○
IE11 ○10 ×9 ×
8 ×7 ×
6 ×
Opera16 + ○15 △
14 and earlier ×
iOS Safari9 + ○8 △7 △6 and earlier ×
Android Browser4.4 + ○3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Description
The 'align-content' property is specified on a flex container to control the alignment of all rows along the cross axis when items wrap into multiple lines (when 'flex-wrap: wrap' causes wrapping). It has no effect when there is only a single line ('flex-wrap: nowrap').
Visual Layout of Each Value
Difference from align-items
The 'align-items' property controls how items are aligned within each row, while 'align-content' controls how the rows themselves are positioned within the container.
| Property | Target | Effect |
|---|---|---|
| align-items | Items within a row | Aligns the cross-axis position of each item. |
| align-content | All rows | Controls how multiple rows are positioned within the container. |
Pattern: Grid-like Layout
/* Wrap cards and distribute evenly */
.grid-like {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* Pack to the top */
gap: 16px;
height: 500px;
}
.card {
flex: 0 0 calc(33.333% - 16px);
}
Checklist When It Has No Effect
If 'align-content' is not working, check the following three points.
First, check whether 'flex-wrap: wrap' is specified. If it remains 'nowrap' (the initial value), there is only a single row and the property has no effect. Second, check whether the container has a size specified along the cross axis — 'height' is required when 'flex-direction: row'. Third, check whether wrapping is actually occurring. If all items fit on a single row, the property has no effect.
Related Properties
| Property | Description |
|---|---|
| align-items | Controls the cross-axis alignment of items within each row. The placement of all rows together is handled by 'align-content'. |
| flex-wrap | Controls wrapping. 'align-content' only takes effect when wrapping occurs with 'wrap'. |
| justify-content | Controls item alignment along the main axis. 'align-content' is the cross-axis equivalent for row alignment. |
If you find any errors or copyright issues, please contact us.
シェアする