フロントエンド - CSS・スタイリング

Flexbox ふれっくすぼっくす

CSSレイアウトフレックスコンテナフレックスアイテム整列レスポンシブデザイン

Flexboxについて教えて

簡単に言うとこんな感じ！

Webページのパーツを「横に並べる」「真ん中に揃える」「均等に配置する」といった整列作業を、CSSで超カンタンにしてくれる仕組みだよ！昔は苦労していたレイアウト調整が、数行のコードでスパッと決まるんだ✨

Flexboxとは

Flexbox（フレックスボックス）は、正式名称を CSS Flexible Box Layout Module といい、HTML要素を柔軟に並べたり整列させたりするためのCSSのレイアウト機能です。2009年にW3Cが提案し、2012年以降に主要ブラウザへ普及しました。

従来のCSSでは、要素を横並びにするために float や inline-block を駆使する必要があり、「なぜかズレる」「縦方向の中央揃えが難しい」といった問題がエンジニアを悩ませてきました。Flexboxはその苦労をほぼ解消し、1次元（横または縦の1方向）のレイアウトを直感的に記述できるようにしました。

Webサイトのナビゲーションメニュー・カードの並び・ボタンの配置など、実務でよく登場するレイアウトのほとんどはFlexboxで対応できます。2次元（縦横同時）のより複雑なレイアウトには後継の CSS Grid が向いていますが、Flexboxは今もフロントエンド開発の基本中の基本として使われています。

Flexboxの構造と主なプロパティ

Flexboxは「コンテナ（入れ物）」と「アイテム（中身）」の2層構造で考えます。親要素に display: flex; を指定するだけで、その子要素が自動的にフレックスアイテムになります。

┌─────────────────────────────────────┐
│  フレックスコンテナ（親要素）          │
│  display: flex;                      │
│  ┌────────┐ ┌────────┐ ┌────────┐  │
│  │ アイテム│ │ アイテム│ │ アイテム│  │
│  │   1    │ │   2    │ │   3    │  │
│  └────────┘ └────────┘ └────────┘  │
└─────────────────────────────────────┘

コンテナ側のプロパティ（親要素に書く）

プロパティ	主な値	意味
`flex-direction`	`row` / `column`	並べる方向（横 or 縦）
`justify-content`	`flex-start` / `center` / `space-between` / `space-around`	主軸方向（並ぶ方向）の揃え方
`align-items`	`flex-start` / `center` / `stretch`	交差軸方向（垂直方向）の揃え方
`flex-wrap`	`nowrap` / `wrap`	はみ出したとき折り返すか
`gap`	`8px` / `1rem` など	アイテム間のすき間

アイテム側のプロパティ（子要素に書く）

プロパティ	意味
`flex-grow`	余った空間をどれだけ伸びて埋めるか（数値が大きいほど優先）
`flex-shrink`	空間が足りないときどれだけ縮むか
`flex-basis`	伸縮前の基準サイズ
`align-self`	そのアイテムだけ交差軸の揃えを個別指定
`order`	並び順を変更（HTMLの順序を変えずに見た目だけ変えられる）

覚え方：justify と align

「justify（ジャスティファイ）= 主軸（横方向）」「align（アライン）= 交差軸（縦方向）」と覚えましょう。flex-direction: column; にすると主軸が縦に変わるので justify が縦方向の制御になる点には注意です。

よく使う組み合わせパターン

/* ① 横並びで均等配置 */
.container {
  display: flex;
  justify-content: space-between;
}

/* ② 縦横ど真ん中に配置（センタリング） */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ③ 折り返しあり・均等な間隔 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

歴史と背景

2009年 — W3Cが最初の Flexbox 仕様草案を公開。当時は display: box; という構文だった
2011年〜2012年 — 仕様が大幅改訂。現在の display: flex; 構文に近い形になる
2012〜2014年 — Chrome・Firefox・Safari・IEがベンダープレフィックス付きで実装開始（-webkit-flex など）
2015年 — W3Cが Candidate Recommendation（勧告候補）として安定版を公開。主要ブラウザが軒並み正式サポート
2017年前後 — IE11のシェア低下とともにベンダープレフィックスなしで使える環境が整い、実務での標準レイアウト手法に定着
現在 — Can I Useによるとグローバルブラウザシェアの99%以上でサポート済み。CSS GridやContainer Queriesと組み合わせて使われる

FlexboxとCSS Gridの比較

FlexboxとCSS Gridはどちらも現代CSSの主力レイアウト技術ですが、得意な場面が異なります。

実務では「コンポーネント内部の細かい並び → Flexbox」「ページ全体やセクションの骨格 → CSS Grid」と使い分けるのが一般的です。どちらかが優れているというわけではなく、組み合わせて使うのが現代のベストプラクティスです。