横並びの項目を次の行へ送りたい：flex-wrapの折り返しを作例で試そう

ボタンや短いカードを横へ並べたら、狭い画面ではみ出した。CSSのFlexboxで、項目を次の行へ送れるかを切り替えてみよう。

Flexboxは、要素を主に一方向へ並べるレイアウトの仕組み。このページでは、同じ幅の三つの項目を、ブラウザの作例で比べる。開発環境や画像ファイルは不要だよ。

最初は、一行へ並べる設定

display:flexを指定すると、子の要素をFlexboxで配置できる。flex-wrapの初期値はnowrapで、基本的に一行のまま配置する。

ただし「一行なら、必ずはみ出す」という意味ではない。項目が縮める条件なら幅が変わることもある。今回の作例は、縮みの影響を分けるため、各項目を90pxで縮めない設定にしているよ。

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.item {
  flex: 0 0 90px;
}

wrapなら、必要に応じて次の行へ

幅240pxの枠に90pxの項目を三つ入れると、間隔を含めた合計は294px。今回の条件では、そのまま一行へ収めることはできない。

編集部では、項目の座標を測り、この行の分かれ方をブラウザで確認した。作例では、はみ出す場合も小さな枠の中で横スクロールでき、記事全体が横へ広がらないようにしているよ。

ページ内で操作する

1. nowrapの状態で、三つが同じ高さにあるか見る。
2. 枠の横スクロールで、最後の項目が右に続くことを確かめる。
3. wrapへ切り替え、最後の項目が次の行へ移ることを見る。
4. リセットで、nowrapと左端へ戻す。

狭い画面で枠自体が240pxより小さくなる場合もある。三つの固定幅を無理に縮めることと、行を分けることは別の動きだと見てみよう。

折り返しだけでは解決しないこと

各項目が親より大きければ、wrapでもその項目自体ははみ出し得る。長いURLや、最小幅を持つ入力欄などは、項目の中身の折り返しも別に確認しよう。

また、複数行になっても、各行の空き方は必ず同じにはならない。二方向の列と行をそろえたいなら、Gridなどほかのレイアウトも検討できるよ。

元の並び順も確認する

見た目が二段になっても、意味のある順番を勝手に変えない。キーボードで移動する順序や、小さな画面で読む流れを確認し、見た目だけの並べ替えへ頼らないようにしよう。

長い文字はFlexの最小幅、列をそろえる方法はGridの自動列数へ。

参照した公式資料

• MDN：flex-wrap

確認日：2026年10月26日。