Flex Wrap（flex-wrap）プロパティ

最終更新：2026-09-13

flex-wrap Flex Wrap（flex-wrap）プロパティ

flex-wrap プロパティは、フレックスアイテムを 1 行にまとめるか、複数行に折り返すかを制御します。初期値は nowrap で、アイテムが圧縮されたりコンテナからはみ出したりしてもすべてを 1 行に維持します。wrap を設定すると、アイテムは次の行へと流れ、レスポンシブレイアウトや複数列のカード配置に非常に便利です。

カテゴリ
初期値	nowrap
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

flex-wrap: nowrap | wrap | wrap-reverse;

⚙️ 値

値	タイプ	説明
`nowrap \| wrap \| wrap-reverse`	キーワード	フレックスアイテムを折り返すかどうか

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
flex-wrap	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： wrap-reverse は行を折り返すだけでなく、その順序も反転させます。最初の行が下部に、最後の行が上部に表示され、各行内のアイテムの順序はそのまま維持されます。

重要： align-content は flex-wrap: wrap が設定されているときにのみ効果を発揮します。行間の間隔と配置を制御します。1 行のみの場合、align-content は何もしません。

❓ よくある質問

Qflex-wrap: wrap を設定しても、なぜアイテムがコンテナからはみ出すのですか？

Aflex-basis や width が固定されているアイテムは、折り返し後も gap・padding・margin・box-sizing が追加する余分な空間によってはみ出すことがあります。パーセンテージによる幅、calc() での計算、あるいは flex-basis: 0 と flex-grow の組み合わせを使えば、アイテムが自分自身のサイズを決めてコンテナ幅を均等に共有するため、はみ出しを完全に防げます。また、祖先要素が min-width や box-sizing を設定してアイテムがコンテンツ以下に縮小できなくしているかも確認してください。これらの制約は flex-basis と相互作用します。

Qレスポンシブレイアウトで nowrap と wrap のどちらを選ぶべきですか？

Anowrap はナビゲーションバーやアクションツールバーなどの、単一行のコンパクトなコンポーネントに向いています。wrap はカードリストやタグクラウド、画面が狭くなるにつれて新しい行へ流すべきものに向いています。レスポンシブレイアウトでは通常 wrap を好み、コンテンツが自然に折り返されるようにし、固定の flex-basis や minmax 値を組み合わせて各アイテムの幅を制御し、モバイルでの体験を安定させます。min-width: auto により 1 つの長い単語が改行不可になる場合があるため、min-width: 0 や overflow-wrap を追加して行を折り返せるようにしてください。

Qflex-wrap: wrap-reverse と flex-wrap: wrap の違いは何ですか？

Aどちらも折り返しを許可します。違いは折り返した行の方向です。wrap は新しい行を主軸の正方向に配置するため、row レイアウトでは新しい行は下側に現れます。wrap-reverse は交叉軸を反転させるため、最初の行は下部から始まり、行は上向きに積み上がり、視覚的な順序が反転します。wrap-reverse が必要になることはまれであり、align-content との相互作用も予想外になることがあるため、通常のレイアウトでは wrap を使ってください。