flex-wrap

/* 折り返さない（初期値） */
.container { display: flex; flex-wrap: nowrap;}

/* 折り返す */
.container-wrap { display: flex; flex-wrap: wrap;}

/* 逆方向に折り返す */
.container-reverse { display: flex; flex-wrap: wrap-reverse;}

デスクトップ

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 に基づいています。

『flex-wrap』はフレックスコンテナに対して指定するプロパティで、子要素（フレックスアイテム）が主軸方向に収まりきらない場合の折り返し動作を制御します。初期値の『nowrap』ではアイテムは一行に並び、収まりきらない場合はアイテムが縮小されます。

すべてのアイテムを一行に配置します。アイテムの合計幅がコンテナの幅を超える場合、各アイテムは『flex-shrink』の値に基づいて縮小されます。コンテナからはみ出す場合もあるため、『overflow』プロパティと組み合わせて使うことがあります。

アイテムが一行に収まりきらない場合、交差軸の方向に次の行へ折り返します。『flex-direction: row』の場合は下方向に、『flex-direction: column』の場合は右方向に新しい行が作られます。レスポンシブレイアウトでは最もよく使われる値です。

『wrap』と同様に折り返しますが、新しい行が作られる方向が逆になります。『flex-direction: row』の場合は上方向に折り返されます。あまり使用頻度は高くありませんが、特定のレイアウトで下から上に積み上げるような表現が必要な場合に使えます。

/* カードを横に並べて、収まりきらなければ折り返す */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 0 1 300px;  /* 最小300px、縮小あり、伸長なし */
}

/* タグを横に並べて自然に折り返す */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag {
    padding: 4px 12px;
    border-radius: 16px;
    background: #eee;
    white-space: nowrap;
}

『nowrap』のままアイテムがコンテナからはみ出す場合は、『overflow: hidden』や『overflow: auto』を指定してはみ出した部分を非表示またはスクロール可能にできます。また、『min-width: 0』をアイテムに指定することで、テキストがはみ出す問題を解決できる場合があります。

/* はみ出し防止 */
.container {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.item {
    min-width: 0;  /* テキストのはみ出しを防ぐ */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

『flex-wrap: wrap』を指定して複数行になった場合、行と行の間隔を制御するのが『align-content』プロパティです。『nowrap』の場合（一行の場合）は『align-content』は効果がありません。