flex-wrapとは？非エンジニア向けにわかりやすく解説

一言で言うと

子要素が入り切らないときに折り返す指定。

CSS Flexbox において、フレックスコンテナの子要素（フレックスアイテム）がコンテナの幅に収まりきらない場合に折り返すかどうかを制御するプロパティです。

指定できる値は次の3種類です。

nowrap（デフォルト）— 折り返しを行わず、アイテムをすべて1行に並べます。幅が足りない場合はアイテムが圧縮されます。

wrap — 幅が足りない場合、後ろのアイテムを次の行へ折り返します。

wrap-reverse — wrap と同じく折り返しますが、折り返し方向が逆（下から上）になります。

display: flex を指定しただけの状態では flex-wrap: nowrap が適用されるため、子要素は意図せず圧縮されることがあります。レスポンシブなレイアウトを作る際は flex-wrap: wrap を明示的に指定するのが一般的です。

レスポンシブレイアウト ── 画面幅に応じてカードやアイテムを自動折り返しするグリッドレイアウトに使われます

ナビゲーションバー ── メニュー項目が多い場合に flex-wrap: wrap で複数行に折り返すことで崩れを防ぎます

カード一覧 ── 商品リストやブログ記事一覧など、アイテム数が可変の場合に幅の異なるデバイスでも整然と並ぶ実装に活用されます