Flexboxとは？CSS Gridとの使い分け
Flexbox（Flexible Box Layout）は、CSSで要素を柔軟に配置するためのレイアウトモジュールだ。2009年にW3Cで仕様化され、現在はすべての主要ブラウザで完全サポートされている。「子要素を横並びにしたい」「要素を縦横中央に配置したい」といった悩みをシンプルなプロパティで解決できる。
Flexboxの最大の特徴は1次元レイアウトであること。行（横方向）か列（縦方向）のどちらか一方向に要素を並べることに特化している。コンテナにひとつのプロパティを追加するだけで子要素が整列する、直感的な設計だ。
FlexboxとCSS Gridの使い分け
Flexboxと並ぶCSSレイアウト技術のCSS Gridは、2次元レイアウト（行と列の両方）を制御する。どちらを使うか迷ったときの判断基準は次のとおりだ。
| 用途 | 推奨 | 理由 |
|---|---|---|
| ナビゲーションバー（横並び） | Flexbox | 1行の要素配置・間隔調整が得意 |
| カードグリッド（複数行） | CSS Grid | 行列の2次元制御が必要 |
| ヘッダー（ロゴ＋メニュー） | Flexbox | 両端揃えや間隔調整がシンプル |
| ページ全体のレイアウト | CSS Grid | ヘッダー・サイドバー・フッターの2次元配置 |
| 要素の縦横中央揃え | Flexbox | justify-content + align-items で2行で解決 |
| フォームのラベルと入力欄 | Flexbox | 同一行内の柔軟な幅調整が容易 |
Point
「コンテンツが主導する（コンテンツの量に応じてサイズが変わる）」ならFlexbox、「レイアウトが主導する（グリッド線に沿ってコンテンツを配置する）」ならCSS Gridが向いている。GitHubのヘッダーやStripeのナビゲーションバーを見ると、ロゴ＋リンク群のような横並び構成にFlexboxが使われているのがわかる。実務では両者を組み合わせるのが一般的だ。
Flex Containerのプロパティ
Flexboxのプロパティは、Flex Container（親要素）に設定するものと、Flex Item（子要素）に設定するものに分かれる。まずはコンテナ側のプロパティから見ていく。
display: flex — Flexboxを有効化する
親要素に display: flex を設定するだけで、直接の子要素がすべてFlexboxの制御下に入る。子要素はデフォルトで横一列に並び、高さはコンテナの高さに合わせて伸びる。たったこれだけで横並びが実現できるのが、Flexboxの強みだ。
flex-direction — 並べる方向を指定する
子要素を並べる主軸の方向を設定する。デフォルトは row（横方向）だ。
| 値 | 並び順 | 主な用途 |
|---|---|---|
| row（デフォルト） | 左→右 | ナビ、ボタン群、横並びリスト |
| row-reverse | 右→左 | 逆順表示が必要な場合 |
| column | 上→下 | 縦並びのカード、サイドバーメニュー |
| column-reverse | 下→上 | チャットUI（最新メッセージを下に） |
flex-wrap — 折り返しを制御する
子要素がコンテナの幅を超えた場合の折り返し動作を設定する。レスポンシブレイアウトでは flex-wrap: wrap が必須だ。
justify-content — 主軸方向の揃え方
主軸（flex-directionで設定した方向）に沿った子要素の配置を制御する。要素の間隔を均等にしたり両端に揃えたりするのに使う。
よく使うのはこの3つ
center（中央揃え）、space-between（両端揃えで均等配置）、flex-end（右寄せ）は実務で最もよく使う3つだ。GitHubのヘッダーのようにロゴとリンクを両端に置くには space-between が一番シンプルに決まる。
align-items — 交差軸方向の揃え方
主軸に対して垂直な方向（交差軸）での子要素の揃え方を設定する。縦の中央揃えに最もよく使われるプロパティだ。
align-content — 複数行の揃え方
flex-wrap: wrap で複数行になった場合の行間の揃え方を設定する。1行しかない場合は効果がない点に注意。
gap — 要素間の余白を一括設定
子要素同士の間隔をまとめて設定する。以前は grid-gap がGridのみの機能だったが、現在はFlexboxでも使える。margin を各要素に付けるより直感的でレスポンシブ対応も容易なので、積極的に使いたい。
Flex Itemのプロパティ
次は子要素（Flex Item）に設定するプロパティだ。各アイテムの伸び縮みや順序を細かく制御できる。
flex-grow — 余白を埋める伸び率
コンテナに余白がある場合に、子要素がどれだけ伸びるかを比率で設定する。デフォルトは 0（伸びない）だ。
flex-shrink — 縮む比率
コンテナが子要素の合計幅より小さい場合に、どれだけ縮むかを比率で設定する。デフォルトは 1（均等に縮む）だ。0 を設定すると縮まなくなる。サイドバーの固定幅を守りたいときに重宝する。
flex-basis — 基準サイズの設定
flex-grow・flex-shrinkが適用される前の、子要素の基準サイズを設定する。width に似ているが、主軸方向に作用するため flex-direction が column の場合は高さとして機能する。
flex — grow・shrink・basisの短縮形
flex-grow、flex-shrink、flex-basis をまとめて記述できる短縮プロパティだ。実務ではこの短縮形を使うのが一般的で、可読性も上がる。
order — 表示順序を変更する
HTMLの記述順を変えずに、表示順を変更できる。デフォルトはすべて 0 で、数値が小さいほど先に表示される。モバイルで画像を上に出したいときに活躍する。
align-self — 個別の縦揃えを上書き
コンテナの align-items を個別のアイテムで上書きする。特定の子要素だけ縦揃えを変えたい場合に使う。
実用レイアウトパターン6選
ここからは、実務で頻繁に登場する6つのレイアウトパターンをコード付きで紹介する。どれもコピー&ペーストで即使える。
パターン1：ナビゲーションバー（ロゴ＋リンク群）
ロゴを左端、ナビリンクを右端に配置する定番パターン。GitHubのヘッダーやStripeのナビなどで見かける、あの構成だ。justify-content: space-between と align-items: center の組み合わせで実現できる。
パターン2：カードレイアウト（均等幅・折り返し）
サービス紹介やポートフォリオでよく使う、カードが均等幅で並ぶレイアウト。flex-wrap: wrap と flex-basis で実装する。
Point
flex: 1 1 280px は「最低280px幅を基準に、余白があれば均等に伸びる」という意味だ。ビューポート幅に応じて自動的に列数が変わるため、メディアクエリなしでレスポンシブになる。これが意外に便利。
パターン3：ヘッダーレイアウト（アイコン＋テキスト）
アイコンとテキストを横に並べて縦中央揃えにする、ボタンやリストアイテムで頻出のパターン。
パターン4：フッターレイアウト（複数カラム）
フッターによく見られる、会社情報・リンク集・SNSアイコンが横並びになるレイアウト。
パターン5：サイドバーレイアウト（固定＋可変）
サイドバーが固定幅で、メインコンテンツが残りの幅を占める定番の2カラムレイアウト。
注意: min-width: 0 を忘れずに
Flex Itemはデフォルトで min-width: auto が設定されており、コンテンツ幅より小さくなれない。メインコンテンツに長いURLや長い単語がある場合にはみ出すことがある。min-width: 0 を設定すれば解決できる。これを知らずに詰まる人が多いので覚えておこう。
パターン6：縦横センタリング（完全中央揃え）
CSSで長年難しかった「縦横完全中央揃え」が、Flexboxではたった3行で実現できる。ローディング画面、モーダル、エラー表示で活躍するパターンだ。
ツールで試す
FlexboxのプロパティをGUIで試せるFlexboxジェネレーターを使えば、コードを書かずにリアルタイムで結果を確認できる。各プロパティの効果を視覚的に学ぶのに最適だ。
レスポンシブ対応テクニック
Flexboxはレスポンシブデザインと相性が抜群だ。いくつかのテクニックを組み合わせることで、メディアクエリの記述を最小限に抑えられる。
flex-wrap + min-width で自動折り返し
最もシンプルなレスポンシブ対応だ。子要素に flex-basis と min-width を設定することで、コンテナ幅に応じて自動的に列数が変わる。
flex-direction の切り替え
PCでは横並び、スマートフォンでは縦並びに切り替えるパターン。メディアクエリで flex-direction だけを変更すればいい。
order でモバイルの表示順を変更
HTMLの記述順はSEOやアクセシビリティを考慮してPCレイアウト順に書きつつ、スマートフォンでは order で表示順を変更できる。
gap を clamp() で可変にする
clamp() 関数と組み合わせることで、ビューポート幅に応じてスムーズにgapが変化する。
Flexboxジェネレーターの使い方
FlexboxのプロパティはGUIで試すのが最も効率的な学習方法だ。ToolShare LabのFlexboxジェネレーターでは、すべてのプロパティをスライダーやセレクトボックスで操作し、リアルタイムで結果を確認できる。
-
コンテナプロパティを設定
flex-direction、flex-wrap、justify-content、align-items、align-content、gapをGUIで選択する。変更のたびにプレビューが即座に更新される。
-
アイテム数を調整
プレビューエリアのアイテム数を増減して、折り返しや伸縮の挙動を確認する。実際のコンテンツ量での見た目を把握できる。
-
個別アイテムのプロパティを設定
特定のアイテムを選択してflex-grow、flex-shrink、flex-basis、order、align-selfを設定する。値の変化による影響が視覚的に理解できる。
-
生成されたCSSをコピー
プロパティの組み合わせが決まったら、生成されたCSSコードをコピーして自分のプロジェクトに貼り付ける。コメント付きで出力されるので可読性も高い。
- 登録・インストール不要でブラウザからすぐ使える
- 全プロパティの値をGUIで直感的に操作できる
- コピー可能なCSSコードを自動生成
- レスポンシブ確認用のビューポートリサイズ機能付き