flex-wrap

レイアウト・配置

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

構文

Syntax

flex-wrap: nowrap | 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と組み合わせてレスポンシブレイアウトを作成。

ブラウザサポート

IE11+, 全モダンブラウザ

flex-wrap

構文

コード例

例 1

例 2

💡 TIPS

関連プロパティ

ブラウザサポート