flex-wrap

レイアウト・配置

フレックスアイテムが一行に収まらない場合の折り返し動作を制御します。nowrap（折り返しなし）、wrap（折り返す）、wrap-reverse（逆順で折り返す）があり、レスポンシブなカードレイアウトなどに使用されます。

構文

Syntax

flex-wrap: nowrap | wrap | wrap-reverse

Tailwindでは

flex-wrap	flex-wrap: wrap
flex-nowrap	flex-wrap: nowrap
flex-wrap-reverse	flex-wrap: wrap-reverse

コード例

例 1

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex: 1 1 200px;
  min-width: 120px;
  background: #3b82f6;
  color: #fff;
  margin-bottom: 8px;
}

実行結果

Item 1

Item 2

Item 3

横幅が足りない場合に自動で折り返して複数行に並ぶレイアウト。レスポンシブなカードやボタン配置でよく使います。

例 2

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.item {
  flex: 1 1 200px;
}

実行結果

nowrap（デフォルト）は折り返さず、アイテムが1行に収まらない場合は縮小されて詰まって表示されます。

💡 TIPS

flex-basisと組み合わせてレスポンシブレイアウトを作成。

🤖 AIがよく間違えるポイント

AIは「一定幅で折り返すカード列」をメディアクエリで書きがちですが、flex-wrap: wrap + flex-basis（またはminmax付きgrid）ならブレークポイントなしで自動化できます。折り返し後の行間が広がって見える問題はalign-content、折り返しタイミングは子のflex-basisとmin-widthで制御する、という関連知識までセットで確認すると精度が上がります。

💬 AIへの頼み方

メディアクエリを使わずに、幅に応じて自動で折り返すタグ一覧をflex-wrapで実装して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

このプロパティを使ったUIレシピ

統計カード（KPI表示）（カード）パンくずリスト（ナビゲーション）

ブラウザサポート

Baseline 広く利用可能

Chrome

29+

Firefox

28+

Safari

Edge

12+