CSSで要素を横並びにしたい、ボタンをページの真ん中に配置したい——そんなとき、以前はfloatやpositionで苦労していました。今はFlexboxを使えば数行で実現できます。

この記事ではFlexboxの基本的な仕組みと、よく使うプロパティを実例付きで解説します。

CSS Flexboxとは？

Flexbox（フレキシブルボックスレイアウト）は、要素を横方向または縦方向に並べ、余白の分配・揃え位置・折り返しを柔軟に制御できるCSSのレイアウト機能です。

使い方はシンプルで、親要素にdisplay: flexを指定するだけで有効になります。

.container {
  display: flex;
}

これだけで、.containerの直接の子要素がすべて横並びになります。

よく使うFlexboxプロパティ

flex-direction：並べる向きを変える

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

justify-content：主軸方向の揃え

横並び（row）のとき、水平方向の並び位置を制御します。

.container {
  display: flex;
  justify-content: flex-start;    /* 左寄せ（デフォルト） */
  /* justify-content: flex-end;   /* 右寄せ */
  /* justify-content: center;     /* 中央 */
  /* justify-content: space-between; /* 両端配置、等間隔 */
  /* justify-content: space-around;  /* 両端にも余白あり */
}

align-items：交差軸方向の揃え

横並び（row）のとき、垂直方向の揃えを制御します。

.container {
  display: flex;
  align-items: stretch;    /* 高さを揃える（デフォルト） */
  /* align-items: center;  /* 垂直中央 */
  /* align-items: flex-start; /* 上揃え */
  /* align-items: flex-end;   /* 下揃え */
}

要素を縦横中央に配置する（よく使うパターン）

.center-box {
  display: flex;
  justify-content: center;  /* 水平中央 */
  align-items: center;      /* 垂直中央 */
  height: 100vh;            /* 画面いっぱいの高さ */
}

flex-wrap：折り返し

デフォルトでは要素がはみ出しても折り返しません。flex-wrap: wrapを指定すると、コンテナに収まらない要素が次の行に折り返されます。カードレイアウトやタグ一覧に便利です。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;  /* 要素間の余白 */
}

flex：子要素の伸縮を制御する

.item {
  flex: 1;    /* 残りスペースを均等に分け合う */
}

.sidebar {
  flex: 0 0 240px;  /* 幅240pxで固定（伸縮しない） */
}

.main {
  flex: 1;    /* 残りを全部占める */
}

ナビゲーションバーの実装例

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
}

.navbar-logo { font-weight: bold; }
.navbar-links { display: flex; gap: 24px; }

よくある質問（FAQ）

FlexboxとCSS Gridの違いは何ですか？
Flexboxは1次元のレイアウト（横一列、または縦一列）が得意です。CSS Gridは2次元のレイアウト（行と列を同時に制御）が得意です。ナビゲーションやカードの横並びにはFlex、ページ全体の骨格やタイル状グリッドにはGridが向いています。
justify-contentとalign-itemsがどちらを制御するか混乱します
justify-contentは主軸（flex-directionの方向）を制御します。flex-direction: rowなら水平方向、columnなら垂直方向です。align-itemsはその交差軸（主軸と直交する方向）を制御します。
Flexboxはレスポンシブデザインに使えますか？
使えます。flex-wrap: wrapとgapを組み合わせると、画面幅に応じて自動的に折り返すレイアウトが作れます。ブレークポイントを最小限にしたい場合に特に便利です。

まとめ

  • Flexboxはdisplay: flexを親要素に指定するだけで使える1次元レイアウト機能
  • justify-contentで主軸方向、align-itemsで交差軸方向の揃えを制御
  • 縦横中央配置はjustify-content: center＋align-items: centerの2行で完了
  • flex-wrap: wrapでレスポンシブな折り返しレイアウトが作れる

CSSレイアウトを視覚的に確認しながら書きたいときは、以下のツールが役立ちます。