CSS Flexbox入門｜主軸と交差軸・justify-content・align-itemsをやさしく解説

Webページを作っていると、「メニューを横一列に並べたい」「ボタンを画面の中央に置きたい」「カードを等間隔で配置したい」といった場面が必ず出てきます。こうした配置をかつてはfloatやtable、複雑なmarginの調整で実現していましたが、今ではFlexbox（フレックスボックス）を使えば、ずっと少ないコードで直感的に組めます。本記事では、Flexboxとは何か、どんな考え方で動くのかを順を追って解説します。

Flexboxとは：display:flexの基本

Flexbox（正式にはCSS Flexible Box Layout）とは、要素を一方向（横または縦）に並べ、その間の余白や伸び縮みを柔軟に制御するためのCSSのレイアウトモジュールです。ポイントは、並べたい要素そのものではなく、その親要素にスタイルを当てるという発想にあります。

使い方はとてもシンプルで、並べたい子要素を囲む親要素にdisplay: flex;を指定するだけです。

.container { display: flex; }

このdisplay: flex;を指定した親要素をフレックスコンテナ、その直接の子要素をフレックスアイテムと呼びます。コンテナにフレックスを宣言した瞬間、中の子要素は自動的に横並びになります。ブロック要素であるはずの<div>が、何もしなくても左から順に並ぶのはこのためです。

実際にどんなコードでどんな見た目になるのかは、Flexboxジェネレーターツールでプロパティを切り替えながら確かめてみるのが分かりやすいでしょう。値を変えるたびにプレビューが変化するので、各プロパティの効果を目で見て理解できます。

主軸と交差軸という考え方

Flexboxを理解するうえで最も大切なのが、主軸（main axis）と交差軸（cross axis）という2本の軸の概念です。この2つを押さえると、後に出てくるプロパティの意味がすっきり頭に入ります。

• 主軸：フレックスアイテムが並ぶ方向の軸です。初期状態では「左から右」の横方向が主軸になります。
• 交差軸：主軸に対して直角に交わる軸です。主軸が横なら、交差軸は「上から下」の縦方向になります。

そして、この主軸の向きを決めるのがflex-directionプロパティです。値を変えると、軸の向きそのものが回転します。

ここで重要なのは、主軸の向きが変われば、後述する配置プロパティの「効く方向」も一緒に変わるという点です。たとえばflex-direction: column;にすると主軸が縦になるため、横方向の配置を担っていたプロパティが縦方向に作用するようになります。「どちらが主軸か」を常に意識することが、Flexboxを使いこなす近道です。

justify-contentとalign-itemsで配置する

軸の概念が分かれば、配置プロパティは一気に理解しやすくなります。Flexboxの配置は、主に2つのプロパティで決まります。

1. justify-content（主軸方向の配置）

justify-contentは、主軸方向にアイテムをどう並べるかを指定します。初期状態（主軸が横）では、左右方向の寄せ方や余白の配り方を制御します。

2. align-items（交差軸方向の配置）

align-itemsは、交差軸方向にアイテムをどう揃えるかを指定します。初期状態（交差軸が縦）では、上下方向の揃え方を制御します。centerを指定すれば縦方向の中央に揃い、stretch（初期値）ならコンテナの高さいっぱいに引き伸ばされます。

この2つを組み合わせるだけで、長年「難しい」とされてきた上下左右の完全な中央寄せが、わずか3行で実現できます。display: flex;にjustify-content: center;とalign-items: center;を加えるだけです。複数行に折り返したときの行同士の揃え方を制御するalign-contentもありますが、まずはこの2つを押さえれば十分です。

flex-wrapで折り返す

初期状態のFlexboxでは、アイテムは折り返さず一行に詰め込もうとします。アイテムの幅の合計がコンテナを超えても、各アイテムが縮んで無理やり一行に収まろうとするのです。これを制御するのがflex-wrapプロパティです。

• nowrap（初期値）：折り返さない。一行に収める。
• wrap：収まらないアイテムを次の行へ折り返す。
• wrap-reverse：折り返す方向を逆にする。

flex-wrap: wrap;を指定しておくと、画面幅が狭いスマートフォンではカードが自然と複数行に折り返し、広いPCでは横一列に並ぶ、といったレスポンシブな挙動を簡単に作れます。flex-directionとflex-wrapはまとめてflex-flowという一行のショートハンドで書くこともできます。

flex-grow / shrink / basisで伸縮を決める

ここまでは親（コンテナ）に当てるプロパティでしたが、個々のアイテムの伸び縮みはアイテム側に指定します。これがFlexboxの「Flexible（柔軟）」という名前の核心です。3つのプロパティがあります。

flex-growは、コンテナに余白が残っているときに、その余白を吸収して伸びる割合を表す数値です。初期値は0で、これだと伸びません。あるアイテムにflex-grow: 1;を指定すると、そのアイテムだけが余白をすべて吸収して広がります。複数のアイテムに1と2を割り当てれば、余白を1対2の比率で分け合います。

flex-shrinkはその逆で、スペースが足りないときに縮む割合です。初期値は1なので、放っておいてもアイテムは必要に応じて縮みます。0を指定すれば「このアイテムは縮ませない」という指定になります。

flex-basisは、伸縮を始める前の基準サイズです。widthに近い役割ですが、flex-growやflex-shrinkと組み合わさって最終的な大きさが決まります。これら3つはflex: 1;のようにflexショートハンドでまとめて書くのが一般的です。flex: 1;は「余白を均等に分け合って同じ幅になる」という、実務で最もよく使う指定です。値の組み合わせは複雑になりがちなので、Flexboxジェネレーターツールで数値を動かしながら挙動を確かめるのがおすすめです。

よくあるレイアウトとGridとの違い

最後に、Flexboxで頻出する定番レイアウトと、似た技術であるCSS Gridとの使い分けを整理します。

定番レイアウト

• 完全な中央寄せ：display: flex; justify-content: center; align-items: center;の3点セット。
• 両端揃えのヘッダー：ロゴを左、メニューを右に置くにはjustify-content: space-between;が便利です。
• 等間隔のカード並び：flex-wrap: wrap;と各カードへのflex: 1;、そしてgapプロパティで隙間を空ければ、均等なカードレイアウトが作れます。

FlexboxとGridの違い

Flexboxとよく比較されるのがCSS Gridです。両者の最大の違いは、扱う次元の数にあります。

大まかには、一方向に並べるならFlexbox、行と列の両方をきっちり制御したいならGridと覚えておくとよいでしょう。実際には、ページ全体の骨格をGridで組み、その中の細かなパーツをFlexboxで整える、という併用が一般的です。Gridの組み方を試したいときは、CSS Gridジェネレーターツールでグリッドを作り、Flexboxジェネレーターツールと見比べてみると、両者の役割の違いがはっきり分かります。

Flexboxは、主軸と交差軸という2本の軸さえ理解すれば、少ないコードで思い通りの配置を実現できる強力な仕組みです。まずは実際に値を変えて、プレビューがどう変わるかを目で確かめることが、習得への近道です。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの対応状況は更新されることがあります。実装にあたっては、最新の公式情報やドキュメントを確認のうえ判断してください。