CSSのFlexboxで横並びにならない

✅ 回答

Flexboxで最も多いミスは、横並びにしたい要素自体に display: flex を書いてしまうことです。

ポイント：display: flex は親要素に書く

/* ❌ 子要素に書いてしまう間違い */
.card {
  display: flex; /* これだと .card の"中身"が横並びになる */
}

/* ✅ 親要素に書く */
.container {
  display: flex; /* .container の子要素が横並びになる */
}

<div class="container">  <!-- ← ここに display: flex -->
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>

もう一つの原因：flex-direction が column になっている

flex-direction: column が指定されていると縦並びになります。横並びにしたい場合は row（デフォルト値）にしましょう。

/* 横並び（デフォルト） */
.container { display: flex; flex-direction: row; }

/* 縦並び */
.container { display: flex; flex-direction: column; }

確認方法：開発者ツール

F12で開発者ツールを開き、親要素を選択すると「flex」バッジが表示されます。子要素のレイアウトを視覚的に確認できます。

まとめ：display: flex は「横並びにしたい要素たちの親」に書きましょう。子要素に書くと、その中身が横並びになってしまいます。

原因3：flex-wrap が設定されていない

子要素が多いとき、デフォルトでは1行に無理やり収めようとして要素が潰れます。折り返したい場合は flex-wrap: wrap を指定します。

/* ❌ 子要素が潰れて表示される */
.container { display: flex; }

/* ✅ 収まらない分は次の行に折り返す */
.container { display: flex; flex-wrap: wrap; }

原因4：flex-grow と flex-shrink の理解不足

flex-grow: 余ったスペースをどれだけ占めるか（0=占めない、1=均等に占める）

flex-shrink: スペースが足りないとき、どれだけ縮むか（0=縮まない、1=均等に縮む）

/* 3つのカードを均等幅にする */
.card { flex: 1; } /* flex-grow:1, flex-shrink:1, flex-basis:0 の省略形 */

/* 左サイドバー固定、右メイン可変 */
.sidebar { flex: 0 0 250px; } /* 固定250px、伸縮しない */
.main { flex: 1; } /* 残りスペースを全て使う */

中高生あるある：学園祭サイトのカード並びが崩れる

学園祭サイトで「出し物一覧」をカード型で横並びにしたいのに、カードが縦に並んでしまう。原因はdisplay: flexを各カードに書いてしまっていること。カードを囲む親要素（.card-list等）に書きましょう。

また、カードが3列で並んでほしいのに1列になる場合は、カードにwidth: 100%が指定されていないか確認。flex: 1 1 calc(33.3% - 1rem)のように指定すると3列になります。

DevTools Flexbox インスペクタの使い方

1. F12でDevToolsを開く

2. Elementsタブで親要素を選択

3. 要素の横に表示される「flex」バッジをクリック

4. ページ上にFlexboxのオーバーレイ（線と矢印）が表示される

オーバーレイで各子要素のサイズ、余白、方向が視覚的にわかります。「なぜこの要素だけ大きいのか」「なぜ折り返されないのか」がすぐに判断できます。