Flexboxの効き方を目で理解｜主軸・交差軸から生成CSSまで
公開日：2026年10月7日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：Flexboxプレイグラウンド
CSS Flexboxは、親要素に display:flex を指定するだけで子要素を横一列または縦一列にきれいに並べられる、Webレイアウトの土台です。とはいえ justify-content と align-items のどちらを使うのか、flex:1 が何をしているのか、値を覚えるだけでは腑に落ちにくいのも事実です。Flexboxプレイグラウンドは、各プロパティをGUIで切り替えると四角いアイテムが実際に並び替わり、同時に生成CSSがリアルタイムで更新されるツールです。この記事は、それを触りながら仕組みを理解するための道案内です。
すべては主軸と交差軸の2本で決まる
Flexboxを理解する最大の鍵は、主軸（main axis）と交差軸（cross axis）という2本の軸です。アイテムが並ぶ方向が主軸、それに直交する方向が交差軸です。既定の flex-direction:row では主軸が横（左右）、交差軸が縦（上下）になります。この2本を頭に描けるかどうかで、プロパティ選びの迷いがほぼ消えます。「詰める方向」なのか「揃える方向」なのかを、まず軸の言葉で言い換える癖をつけてください。
flex-directionが軸の向きを回す
flex-direction は主軸の向きを決めるプロパティで、ツールでは row・row-reverse・column・column-reverse を選べます。row は左から右、row-reverse は右から左、column は上から下、column-reverse は下から上へ並びます。重要なのは、column を選んだ瞬間に主軸が縦・交差軸が横へ入れ替わる点です。同じ justify-content:center でも、row なら左右中央、column なら上下中央に効きます。「センターに置いたのに横方向が変わらない」という戸惑いの多くは、direction を変えたことで軸が回っているのに気づいていないだけです。
justify-contentとalign-itemsは別の軸を担当する
この2つは混同されがちですが、担当する軸が違います。justify-content は主軸方向の詰め方、align-items は交差軸方向の揃え方です。row のときは左右中央が justify-content:center、上下中央が align-items:center で、両方を center にすると要素は枠のど真ん中に来ます。justify-content には flex-start・flex-end のほか、両端揃えの space-between、両脇にも半分の余白を配る space-around、間隔を均等にする space-evenly があります。align-items の既定は stretch で、高さを指定しないアイテムは交差軸いっぱいに引き伸ばされます。中央や上下端なら center・flex-start・flex-end、文字のベースラインで揃えるなら baseline を選びます。
flex-growとshrink、basis、そしてflex:1の正体
アイテム側の伸縮は3つで決まります。flex-basis は伸縮前の基準サイズ、flex-grow は余った空間を分け合う比率、flex-shrink は幅が足りないとき縮む比率です。順番が大切で、まず各アイテムに basis 分の幅を配り、余った空間を grow の比率で分配します。たとえばコンテナ幅600px、3つとも flex-basis:100px なら基準の合計は300px、残り300pxを配ります。1つ目だけ flex-grow:2、残り2つを flex-grow:1 にすると比率は2:1:1なので、1つ目は追加150pxで250px、他は175pxずつ、合計はぴったり600pxです。よく使う flex:1 は flex-grow:1; flex-shrink:1; flex-basis:0% の短縮形で、基準を0とみなすため、全員に付ければ600pxを3等分して200pxずつの均等な列になります。片方だけ flex:2 にすれば2:1、400pxと200pxに分かれます。ツールでは grow・shrink・basis を個別に入力してこの挙動を再現でき、特定のアイテムだけ揃え方を変えたいときは align-self で align-items を上書きできます。
flex-wrapとgapで折り返しと余白を整える
既定の flex-wrap:nowrap では、アイテムは1行に押し込められ、収まらなければ縮みます。flex-wrap:wrap にすると1行に収まらないアイテムが次の行へ折り返し、カード一覧やタグを自然に段落ちさせられます。そしてalign-content は複数行になって初めて効くプロパティで、行と行の間隔を決めます。1行だけの状態では変化しないため、wrap を有効にしてアイテムを増やしてから試してください。アイテム間の溝は gap で一括指定します。margin と違って両端に余分な余白が付かず、折り返しても間隔を1行で管理できます。ツールの生成CSSは gap: 8px; のような形で出力され、プレビューと完全に一致します。
Gridとの使い分けとよくある失敗
Flexboxは1次元（横か縦の一方向）のレイアウトが得意です。ナビゲーションバー、ボタンの並び、中央寄せ、可変幅のカード列は Flexbox が向いています。一方、行と列の両方をきっちり揃えたい表組みのようなレイアウトは、2次元を扱える CSS Grid が素直です。よくある失敗は、揃わない原因を主軸と交差軸の取り違えで作ってしまうこと、column に切り替えたのに row の感覚のまま justify-content をいじること、そして高さ未指定なのに align-items:center が効かないと悩むこと（既定の stretch で引き伸ばされているだけ）です。プレイグラウンドで値を1つずつ動かし、四角の動きと生成CSSを見比べれば、こうした思い込みは短時間でほどけます。納得できた設定はそのままコピーできます。