CSS

CSS Flexboxの使い方を徹底解説｜基本からレイアウト例まで

✅ CSS Flexboxとは？

Flexbox（フレックスボックス） は、CSSで要素を柔軟に並べたり整列させたりできるレイアウトシステムです。
特に「要素を横並びにしたい」「縦方向に中央揃えしたい」といった場面で大活躍します。

従来のfloatやinline-blockでは難しかったレイアウトを、シンプルなプロパティ指定だけで実現できるのが大きな特徴です。

📌 Flexboxを有効にする方法

まずは基本の書き方です。

.container {
  display: flex; /* Flexboxを有効化 */
}

これだけで、.container の子要素がフレックスアイテムとして扱われます。

🔑 Flexboxでよく使うプロパティ一覧

1. flex-direction（配置方向）

.container {
  display: flex;
  flex-direction: row; /* 横並び（デフォルト） */
}
  • row → 横並び（左→右）
  • row-reverse → 横並び（右→左）
  • column → 縦並び（上→下）
  • column-reverse → 縦並び（下→上）

2. justify-content（横方向の整列）

.container {
  display: flex;
  justify-content: center;
}
  • flex-start → 左寄せ（デフォルト）
  • flex-end → 右寄せ
  • center → 中央揃え
  • space-between → 両端揃え（間隔均等）
  • space-around → 要素の周りに余白を均等に配置
  • space-evenly → 全て均等に配置

3. align-items（縦方向の整列）

.container {
  display: flex;
  align-items: center;
}
  • flex-start → 上寄せ
  • flex-end → 下寄せ
  • center → 縦中央揃え
  • stretch → 高さを揃える（デフォルト）
  • baseline → テキストのベースラインに揃える

4. flex-wrap（折り返し）

.container {
  display: flex;
  flex-wrap: wrap; /* 横幅が足りなければ折り返す */
}

5. flex（アイテムごとの伸縮性）

.item {
  flex: 1; /* 均等に幅を分配 */
}
  • flex: 1 → 残りのスペースを均等に分配
  • flex: 2 → 他の要素の2倍の割合でスペースを占有

🎯 実例：横並びのカードレイアウト

<div class="container">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card {
  width: 30%;
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
}

これで 3つのカードが横並び になり、中央揃え＋均等配置されます。

💡 Flexboxが便利な場面

  1. ヘッダーメニューの横並び
  2. 縦横中央揃え
  3. カードや商品一覧の横並び
  4. レスポンシブデザイン（画面サイズに応じて折り返し）

⚠️ 初心者がつまずきやすいポイント

  • justify-content（横方向）とalign-items（縦方向）の違いを混同しがち
  • Flexboxは「1次元レイアウト」が得意（2次元はCSS Gridが向いている）
  • スマホ対応するなら flex-wrap を忘れない

📌 まとめ

  • Flexboxは要素を柔軟に並べるためのCSSレイアウト
  • display: flex を指定するだけで有効化できる
  • 横並び・中央揃え・等間隔レイアウトが簡単に作れる
  • レスポンシブデザインにも強い

-CSS