Flexboxとは？

Flexboxとは、CSSで要素を柔軟（flexible）に配置するためのレイアウト機能です。
横並び・縦並び・中央揃え・間隔調整などを、シンプルな指定で実現できます。

Flexboxを使うには、親要素に次の指定を行います。

.container {
  display: flex;
}

この指定をすると、

• .container → フレックスコンテナ
• その直下の要素 → フレックスアイテム

という関係になります。

---

Flexboxで何ができるのか

Flexboxを使うと、次のようなレイアウトが簡単にできます。

• ・横並び・縦並びの切り替え
• ・要素の中央揃え（上下左右）
• ・画面サイズに応じた伸縮
• ・均等配置・余白を自動調整
• ・並び順の変更（HTMLを書き換えずに）

---

Flexboxの基本構造

Flexboxは1本の軸を基準にレイアウトします。
・主軸（main axis）
・交差軸（cross axis）
主軸の向きは flex-direction で決まります。

---

flex-direction（並び方向）

要素をどの方向に並べるかを指定します。(並び順を変更)

.container {
  flex-direction: row;
}

値	挙動
row	横並び（左 → 右） ※デフォルト
row-reverse	横並び（右 → 左）
column	縦並び（上 → 下）
column-reverse	縦並び（下 → 上）

---

justify-content（主軸方向の揃え）

主軸方向の配置方法を指定します。

.container {
  justify-content: center;
}

値	挙動
flex-start	先頭に寄せる
center	中央揃え
flex-end	末尾に寄せる
space-between	両端揃え（間隔均等）
space-around	各要素の周囲に余白(均等)
space-evenly	すべて均等な間隔

---

align-items（交差軸方向の揃え）

交差軸方向の揃え方を指定します。

.container {
  align-items: center;
}

値	挙動
stretch	高さ（幅）を伸ばす ※デフォルト
center	中央揃え
flex-start	上（左）揃え
flex-end	下（右）揃え
baseline	文字のベースライン揃え

---

中央揃えの代表例

上下左右中央揃えは、Flexboxの定番です。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

これだけでOKです。

---

flex-wrap（折り返し）

要素がはみ出したときに折り返すかを指定します。

.container {
  flex-wrap: wrap;
}

値	挙動
nowrap	折り返さない ※デフォルト
wrap	折り返す
wrap-reverse	逆方向に折り返す

---

gap（要素間の余白）

Flexアイテム同士の間隔を簡単に指定できます。

.container {
  gap: 15px;
}

margin を個別に書かなくていいのが便利です。

値	挙動
gap	両方行（縦横方向）の間隔
row-gap	行方向（縦方向）の間隔
column-gap	列方向（横方向）の間隔

---

flex（子要素側の指定）

子要素がどれくらい伸び縮みするかを指定します。

.item {
  flex: 1;
}

これは以下の省略形です。

flex: flex-grow flex-shrink flex-basis;

値	意味
flex-grow	余白があったときに伸びる割合
flex-shrink	はみ出すときに縮む割合
flex-basis	基準となるサイズ

---

Flexboxが向いているケース

• ・ナビゲーションメニュー
• ・ボタンの横並び
• ・カードレイアウト
• ・中央配置が必要なUI
• ・レスポンシブ対応の簡易レイアウト