# flex-wrap

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

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/flex-wrap/

## 構文

```css
flex-wrap: nowrap | wrap | wrap-reverse
```

## Tailwindでは

- `flex-wrap` → flex-wrap: wrap
- `flex-nowrap` → flex-wrap: nowrap
- `flex-wrap-reverse` → flex-wrap: wrap-reverse

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 29+ / Firefox 28+ / Safari 9+ / Edge 12+

## コード例

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

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

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

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

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

.item {
  flex: 1 1 200px;
}
```

## TIPS

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

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

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

## AIへの依頼文例

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

## 関連プロパティ

- [flex-grow-shrink-basis](https://www.css-dictionary.com/property/flex-grow-shrink-basis.md)