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 は「横並びにしたい要素たちの親」に書きましょう。子要素に書くと、その中身が横並びになってしまいます。