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
/* 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 | 各行をコンテナの交差軸方向いっぱいに伸ばして配置します。初期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 |
|---|---|
| 初期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').
各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);
}
Effectがない場合のチェックポイント
If 'align-content' is not working, check the following three points.
1つ目は『flex-wrap: wrap』が指定されているか。『nowrap』（初期Value）のままでは行が一つしかないためEffectがありません。2つ目はコンテナに交差軸方向のサイズが指定されているか。『flex-direction: row』の場合は『height』が必要です。3つ目は実際に折り返しが発生しているか。アイテムが一行に収まっている場合はEffectがありません。
関連Property
| Property | Description |
|---|---|
| align-items | Items within a rowの交差軸方向の揃え方を制御します。All rowsの配置は『align-content』で行います。 |
| flex-wrap | 折り返しを制御します。『align-content』は『wrap』で折り返しが発生した場合にのみEffectがあります。 |
| 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.
シェアする