CSS Flexbox完全ガイド: 2026年に柔軟なレイアウトを使いこなす

CSS Flexboxは、コンテナ内の要素を1つの軸に沿って整列し、空きスペースを効率よく配分するためのレイアウトモデルです。昔はfloat、table、absolute positioningなどで無理やり解決していた問題を、より自然で予測しやすい形で扱えます。

Flexboxは、縦方向の中央寄せ、均等配置、可変サイズの要素の整列、レスポンシブな並び替えなど、フロントエンドで頻出する課題を大幅に簡単にします。そのため、現代のCSSではほぼ必須の知識です。

• 縦横中央寄せ: 以前のような複雑なハックが不要
• 柔軟なサイズ調整: 要素が伸びる、縮む、折り返すを自然に制御できる
• 一貫した配置: 軸ベースの考え方で理解しやすい

読みながら動作を試したい場合は、Flexbox playgroundを別タブで開いて確認してください。

Flexboxは、親要素にdisplay: flexを指定するところから始まります。そうすると、その直下の子要素はすべてflex itemになります。

初期状態では、要素は横並びになり、折り返さず、主軸の先頭に寄り、交差軸方向には引き伸ばされます。

値	主軸	方向
row	横方向	左から右
row-reverse	横方向	右から左
column	縦方向	上から下
column-reverse	縦方向	下から上

flex-wrapは折り返しを制御します。nowrapは1行固定、wrapは折り返し、wrap-reverseは逆順の折り返しです。flex-flowを使えばdirectionとwrapをまとめて書けます。

justify-contentは主軸方向の配置、align-itemsは交差軸方向の配置を担当します。Flexboxで最もよく使うプロパティです。

プロパティ	役割
justify-content: center	主軸方向で中央揃え
space-between	要素間のスペースを均等に配分
align-items: center	交差軸方向で中央揃え
align-items: stretch	交差軸いっぱいに伸ばす

複数行がある場合はalign-contentが行の配置を制御します。要素同士の間隔をきれいに管理したいなら、gapを使うのが最も扱いやすい方法です。

個々の要素がどれだけスペースを使うかは、item側のプロパティで決まります。

• flex-grow: 余白があるときにどれだけ広がるか
• flex-shrink: スペースが足りないときにどれだけ縮むか
• flex-basis: 再配分前の基準サイズ

flexはこれらをまとめたショートハンドです。flex: 1は柔軟に広がる典型的な指定、flex: noneはサイズ固定、flex: 0 0 250pxは250px固定の要素を作るときに便利です。

align-selfで個別の配置を上書きでき、orderでHTMLを変えずに見た目の順序だけ変更できます。

Flexboxは、日常的なUIパターンで特に力を発揮します。

• 完全な中央寄せ: display: flex; justify-content: center; align-items: center;
• ナビバー: justify-content: space-betweenでロゴとメニューを左右に分離
• Sticky footer: 列方向のwrapperにmin-height: 100vh、mainにflex: 1
• 最後の要素を右へ: margin-left: auto
• サイドバー + コンテンツ: サイドバー固定、本文は可変

こうしたパターンは、Flexbox playgroundで確認しながら覚えるのが効果的です。

カード一覧では、コンテナにdisplay: flex; flex-wrap: wrap; gap: 24px;、各カードにflex: 1 1 300px;を指定するパターンがよく使われます。これにより、カードは最小幅を保ちながら横幅に応じて自然に並び替わります。

holy grail layoutは、header、footer、左右のsidebar、中央のmain contentを持つ定番レイアウトです。外側のwrapperを縦方向のflexにし、中央の領域をさらに横方向のflexにすることで構成できます。

• 外側wrapper: display: flex; flex-direction: column; min-height: 100vh;
• 中央領域: display: flex; flex: 1;
• sidebar: flex: 0 0 200px;
• main content: flex: 1;

同じ行にあるカードの高さを揃えやすいのもFlexboxの利点です。

Flexboxは1次元のレイアウト、CSS Gridは2次元のレイアウトに向いています。つまり、横または縦の並びを整えたいならFlexbox、行と列の両方を厳密に管理したいならGridが適しています。

• Flexboxはnavbar、card、form、button groupなどに最適
• Gridはページ全体の構造や複雑なグリッドレイアウトに最適

観点	Flexbox	Grid
次元	1D	2D
得意分野	整列とスペース配分	構造設計
よくある用途	コンポーネント内部	ページ全体のレイアウト

実務では両方を組み合わせるのが最も効率的です。Flexbox playgroundとCSS Grid generatorで比較してみてください。

Flexboxでは、次のようなミスがよく起きます。

• flex-shrinkの初期値1を忘れる
• widthを使い、flex-basisを使わない
• min-width: 0を入れずにテキスト省略が崩れる
• 2次元グリッドをFlexboxだけで無理に作る

便利なTipsもあります。

• margin-left: autoで要素を反対側へ押し出せる
• flex: 1 1 0%は均等配分に向いている
• 入れ子のflex containerは複雑なUIで非常に有効
• orderは見た目だけを変え、アクセシビリティ上の読み順は変えない

挙動を素早く確認したいときは、interactive Flexbox playgroundが役立ちます。