align-content

/* 行をコンテナいっぱいに伸ばす（初期値） */
.container { display: flex; flex-wrap: wrap; align-content: stretch;}

/* 行を上に寄せる */
.container-start { display: flex; flex-wrap: wrap; align-content: flex-start;}

/* 行を中央に寄せる */
.container-center { display: flex; flex-wrap: wrap; align-content: center;}

/* 行を均等配置 */
.container-between { display: flex; flex-wrap: wrap; align-content: space-between;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ prefix『-webkit-』が必要

20 以前 ×

Firefox

28 以降 ○

27 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

16 以降 ○

15 △

↑ prefix『-webkit-』が必要

14 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『align-content』はフレックスコンテナに指定するプロパティで、複数行（『flex-wrap: wrap』を指定して折り返しが発生した状態）における行全体の交差軸方向の配置を制御します。一行のみの場合（『flex-wrap: nowrap』）は効果がありません。

『align-items』は各行の中でアイテムをどう揃えるかを制御し、『align-content』は行そのものをコンテナ内でどう配置するかを制御します。

/* カードを折り返して均等に配置 */
.grid-like {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;  /* 上に詰める */
    gap: 16px;
    height: 500px;
}
.card {
    flex: 0 0 calc(33.333% - 16px);
}

『align-content』が効かない場合、以下の3点を確認してください。

1つ目は『flex-wrap: wrap』が指定されているか。『nowrap』（初期値）のままでは行が一つしかないため効果がありません。2つ目はコンテナに交差軸方向のサイズが指定されているか。『flex-direction: row』の場合は『height』が必要です。3つ目は実際に折り返しが発生しているか。アイテムが一行に収まっている場合は効果がありません。