flex-directionとflex-wrapの使い分け

📝 問題の再掲

復習Q4: flex-direction: column を設定すると子要素はどう並ぶ？

正答: 縦方向（上から下）に並ぶ

⚠️ よくある間違い

• flex-wrap で縦並びになると思ってしまう
• flex-direction と flex-wrap の役割を混同する
• wrap を設定しても折り返されない（子要素の幅が小さいため）

📖 段階的な説明

ステップ1：flex-direction — 並ぶ方向を決める

• row（初期値）: 横方向（左→右）に並ぶ
• column: 縦方向（上→下）に並ぶ
• row-reverse: 横方向（右→左）
• column-reverse: 縦方向（下→上）

ステップ2：flex-wrap — はみ出したときの折り返し

• nowrap（初期値）: 折り返さない（はみ出すか縮む）
• wrap: 親の幅を超えたら次の行に折り返す

ステップ3：組み合わせパターン

/* カードを横並び＋折り返し（グリッド風） */
.container {
  display: flex;
  flex-direction: row;   /* 横に並べる */
  flex-wrap: wrap;       /* はみ出したら折り返す */
  gap: 16px;
}

/* ナビを縦並び（サイドバー） */
.sidebar {
  display: flex;
  flex-direction: column; /* 縦に並べる */
}

/* スマホでは縦、PCでは横 */
.layout {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
}

ステップ4：レスポンシブでの切り替え

@media で画面幅に応じて flex-direction を切り替えるのが定番パターンです。スマホでは column、PCでは row にします。

💡 覚え方のコツ

direction = 道の向き（横道か縦道か）

wrap = 折り返し地点（道の端まで来たら次の列に折り返す）

✅ 確認問題

Q: 5枚のカード（各幅200px）を横並びにして、画面幅が足りないときは自動で折り返したい。正しいCSSはどれ？

A: flex-direction: wrap;

B: flex-direction: row; flex-wrap: wrap;