まず確認すべき3つのプロパティ
Flexboxの横並びが崩れるとき、関係するのは主にdisplay:flexを付けた親要素のflex-wrap、子要素のmin-width、そして子要素のflex指定(特にflex-shrink)の3つです。この3つを順番に確認するだけで、多くのケースは原因が特定できます。
flex-wrapの初期値はnowrapで、本来は折り返さないのが標準です。それでも折り返して見えるときは、実はflex-wrap:wrapが上位や別のクラスで効いているか、あるいは折り返しではなく要素が次の行に落ちて見える別の現象(親のwidth不足など)を疑います。
逆に潰れて重なる場合は、flex-shrinkの初期値1によって子要素が縮められていることが多く、これは折り返しとは別の問題として切り分ける必要があります。
min-widthが折り返しを引き起こすしくみ
Flexアイテムには暗黙のmin-width:autoが効いており、これがコンテンツの最小幅を下回って縮まないように働きます。長いテキストや画像を含むアイテムは、この最小幅のせいで縮みきれず、結果として親に収まらなくなって折り返したように見えます。
解決策は、縮めたいアイテムにmin-width:0を明示することです。これでコンテンツ由来の最小幅の制約が外れ、flex-shrinkが想定どおり働いて横並びを保てます。テキスト要素を含むカードレイアウトで特に有効です。
画像が原因の場合は、imgにmax-width:100%やwidth:100%を与え、親側でmin-width:0と組み合わせると安定します。
症状別チェック表
Flexboxの子要素が意図せず折り返す・横並びにならないときは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
原因を切り分ける手順
実機での切り分けは、上から順に試すと無駄がありません。次の順序で確認してください。
- 親要素にdisplay:flexが正しく付いているか、開発者ツールのComputedで確認する
- 親のflex-wrapの算出値がnowrapかwrapかを見る
- 折り返すアイテムにmin-width:0を一時的に当てて挙動が変わるか試す
- flex:1 1 0など縮小・伸長を明示し、初期値依存をなくす
- 親要素の幅が画面幅を超えていないか(余白やpaddingの加算)を確認する
gap・paddingの加算で幅が足りなくなるケース
box-sizingがcontent-boxのままだと、paddingやborderが幅に加算され、合計が親を超えて折り返しの原因になります。プロジェクト全体にbox-sizing:border-boxを適用しておくと、この種の計算ミスを大幅に減らせます。
gapプロパティで子要素間に間隔を入れている場合、その合計分も幅を消費します。アイテム幅をcalc()で指定するときはgapの本数(アイテム数-1)を考慮しないと、わずかに溢れて折り返します。
100%幅を前提にした横並びでは、percentage指定とgapの併用が溢れの定番原因なので、flex-basisとgapの関係を意識しましょう。
実機で複数パターンを見比べて確定させる
Flexの挙動はブラウザや画面幅で見え方が変わるため、修正版をいくつか作って実際の端末で見比べるのが確実です。min-width:0を入れた版と入れない版、flex-basisを変えた版などを並べて確認すると判断が早まります。
確認用のHTMLをそのまま共有して同僚やデザイナーに見てもらいたいときは、ギガサイト便のようにHTMLをドロップするだけで〇〇.giga-site.com形式の共有URLが発行されるサービスが便利です。CDNのエッジ配信で表示も速く、スマホ実機でもすぐ開けます。レビューが終わったら公開期限を設定して自動的に閉じられます。
よくある質問
flex-wrap:nowrapにしているのに折り返すのはなぜですか
本当に折り返しているのではなく、アイテムが縮みきれずに親を超えて溢れている可能性が高いです。縮めたいアイテムにmin-width:0を当てて、flex-shrinkが働くか確認してください。
min-width:0はどのアイテムに付ければいいですか
縮んでほしいのに縮まないアイテム、特に長いテキストや画像を含むものに付けます。すべてに一律で付けるより、原因のアイテムに限定したほうが意図が明確になります。
横並びにしたいのにflex-directionが縦になります
flex-directionの初期値はrowで横並びですが、columnが別のクラスやメディアクエリで効いている場合があります。開発者ツールのComputedでflex-directionの算出値を確認してください。
calc()で幅を指定すると微妙に溢れます
gapやpaddingの分を計算に含めていないことが多いです。box-sizing:border-boxを前提にし、calc(100% / 列数 - gap分)のようにgapの消費量を差し引いてください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。