CSS Flexboxジェネレーター

余った空間が見えるFlexboxジェネレーター

CSS Flexboxジェネレーターのステージに置かれたコンテナは、本物のdisplay: flexのボックスです。親要素の方向・折り返し・配置や間隔を操作すると、アイテムがその場で動きます。角のハンドルで幅と高さをドラッグすれば、アイテムがいつ次の行へ送られ、いつ縮むのかもすぐに分かります。ガイド線は、主軸と交差軸の向きを矢印で、gapを濃いバーで、アイテムが使っていない余った空間を斜線と数値で示します。アイテムがコンテナからはみ出したときは、あふれた長さを赤い斜線で表示します。

アイテムを1つ選んでflex: 1・auto・noneなどの値を変えると、下の「サイズの計算」が、CSS Flexbox仕様の計算手順(§9.7)に沿って余った空間をどう分けたかを示します。この計算結果は、いま開いているブラウザが実際に描画したサイズと1px以内で照らし合わせています。配置が決まったらCSSとHTMLをコピーでき、「リンクをコピー」で現在の状態をURLに残すこともできます。

Flexboxを使う場面とGridとの使い分け

Flexboxは、アイテムを一方向に並べ、その1行の中で空間を分ける配置方法です。複数行に折り返しても、空間は行ごとに別々に計算されるため、上下の行で列の境目はそろいません。行と列を同時にそろえる表のようなレイアウトには、CSS Gridのほうが向いています。

• メニューやボタンの並び: 長さがばらばらのアイテムを1行に並べ、gapで間隔をそろえたいときに使います。1つだけ端へ寄せたいときはautoマージンを指定します(例「ナビゲーションバー」)。
• 縦横中央の配置: 親要素の高さの中で、内容を1つだけ真ん中に置きたいときに使います。位置を別途計算する必要はありません。
• 入力欄 + ボタン、サイドバー + 本文: 片方のサイズを固定し、もう片方に余った空間をすべて任せたいときに使います(flex: 0 0 120pxとflex: 1 1 0)。
• 下に付くフッター: 縦方向で本文にflex-growを指定すると、内容が短くてもフッターが下端に付きます。
• タグやチップの一覧: 折り返しをオンにして、内容の長さのままに流したいときに使います。カードのように、すべての行で列の幅を同じにしたい場合はGridを検討します。例「伸びるカード」で最後の行のカードが広がるのは、行ごとに別々に分ける計算のためです。

使い方

1. 出発点を選びます。 12個ある配置の例からどれかをクリックすると、親要素とアイテムの設定、コンテナのサイズがまとめて切り替わります。広い画面ではステージが画面の上に固定されて付いてくるので、例を順にクリックしながら結果をすぐに比べられます。
2. 親要素を決めます。 先に方向と折り返しを選び、次に主軸の配置と交差軸の配置を変えます。配置のアイコンは現在の方向に合わせて回転するため、アイコンの中のバーが動く向きが、実際にアイテムが動く向きです。
3. サイズをドラッグして試します。 ステージの右下にあるハンドルでコンテナを狭めると、折り返しや縮みが起こる境目を見つけられます。ハンドルにフォーカスして矢印キーを押すと10pxずつ、Shiftと一緒に押すと50pxずつ変わり、Homeキーで幅がステージに合います。
4. アイテムを調整します。 ステージ上のアイテムか番号ボタンでアイテムを選び、文字、flexの値、順序、align-self、autoマージンを変えます。「サイズの計算」のカードで、そのアイテムが余った空間をどれだけ受け取ったかを確かめます。
5. コピーします。 「CSSをコピー」と「HTMLをコピー」でコードを持ち帰れます。通常のコードには、初期値と異なる配置のプロパティだけが入ります。「プレビューの装飾を含める」をオンにすると、ステージと同じサイズ・余白・枠線まで含まれるので、貼り付け先でも同じ見た目を再現できます。

主軸と交差軸

主軸はアイテムが並ぶ方向、交差軸はそれに垂直な方向です。justify-contentは主軸方向に、align-items・align-self・align-contentは交差軸方向にアイテムを動かします。左から右へ横書きする画面では、4つの方向は次のとおりです。

flex-wrap: wrap-reverseは、交差軸の始点と終点を入れ替えます。そのため、rowでwrap-reverseを選ぶと行が下から上へ積まれ、align-items: flex-startも行の下側に寄ります。右から左へ書く文書(direction: rtl)や縦書きでは始点の側がまた変わるので、flex-startを常に「左」と覚えていると間違えやすくなります。

justify-contentは余った空間を分けます

justify-contentは、アイテムのサイズと間隔をすべて引いたあと、主軸に残った空間をどこに置くかを決めます。余った空間がなければ、値を変えても何も動きません。下の表は、内側の幅400pxに80pxのアイテム3つをgapなしで置き、余った空間が160pxになるときの結果です。

space-aroundは各アイテムの両側に同じ余白を取るので、アイテムの間(53.33px)は両端(26.67px)の2倍になります。space-evenlyは両端とアイテムの間をすべて同じにします。この3つの分配値は、空間を分けられないときに代替の配置へ切り替わります。CSS Box Alignmentは、space-betweenの代替をsafe flex-start、space-aroundとspace-evenlyの代替をsafe centerと定めています。そのため、アイテムが1つだけのときはspace-betweenが先頭側に、残りの2つが中央に置かれます。アイテムがあふれるときはsafeによって先頭側が守られ、3つとも先頭側に付きます(Chromium 151で確認)。

align-items・align-self・align-content

align-itemsは1行の中で各アイテムを交差軸のどこに置くかを決め、align-selfはその値をアイテム1つだけ変えます。初期値のstretchは、交差軸のサイズがautoのアイテムを行の大きさまで伸ばします。横並びのアイテムにheightを直接指定すると、伸びません。baselineは、文字サイズが異なるアイテムの1行目の文字のベースラインをそろえます(例「文字のベースライン揃え」)。

align-contentは、複数の行を1つのまとまりとみなし、行全体を交差軸方向に配置します。初期値のnormalはflexコンテナではstretchと同じ動きをし、行を伸ばして余った空間を埋めます。仕様では、このプロパティは1行(single-line)のflexコンテナには効果がないとされているため、flex-wrap: nowrapではどの値を選んでも変わりません。逆にwrapなら、実際の行が1本だけでも適用されます。Chromium 151で、高さ100pxのコンテナに20pxのアイテムを1行置いてalign-content: centerを指定したところ、nowrapでは上に付いたまま変わらず、wrapでは40px下がって中央に置かれました。

flexショートハンド: initial・auto・none・1

flexは、flex-grow、flex-shrink、flex-basisを一度に書くプロパティです。仕様がよく使う値として挙げる4つは下のとおりで、flex: 1のように数値を1つだけ書くとflex-basisは0になります。右の2列は、内容の幅が100pxと300pxのアイテム2つを、内側の幅が600pxと300pxのコンテナに入れた結果です。

flex: autoとflex: 1の違いは出発点にあります。autoは内容のサイズ(100・300)に余った200を半分ずつ足すので、長いアイテムが広いままです。1は0から始めて600を半分ずつ分けるので、2つのアイテムの幅は同じになります。表は、内側の余白と枠線がなく、内容の最小幅が十分に小さいアイテムで計算しました。長い単語などがあって最小幅が受け取る分より大きいと、そのアイテムは最小幅で止まり、残りのアイテムが余った空間をもう一度分けます。

flex-growは余った空間を分ける比率です

flex-growは最終サイズの比率ではなく、余った空間を分ける比率です。下は、内側の幅500pxにアイテムを2つ置いた結果です。

grow 1 : 2は、余った300pxを100と200に分けるだけなので、最終的な幅は200 : 300になります。最終的な幅をちょうど1 : 2にするには、最後の行のように基準サイズを0にして(flex: 1とflex: 2)、内側の余白と枠線がなく、内容の最小幅も影響しないようにします。このツールのステージのアイテムのように内側の余白と枠線が30pxあると、その30pxから始まるため、flex: 1とflex: 2でもちょうど1 : 2にはなりません。伸びるアイテムのgrowの合計が1未満のとき、仕様は余った空間にその合計を掛けた分だけを分けます。0.25 + 0.25 = 0.5なので、300pxの半分の150pxだけを分け合い、残りの150pxはjustify-contentが配置します。

flex-shrinkは基準サイズに比例して縮めます

空間が足りないときに縮める量は、shrinkの値に内側の基準サイズを掛けた比率で分けます。内側の基準サイズは、基準サイズから内側の余白と枠線を引いた値です。そのため大きいアイテムほど多く縮み、shrinkの値が同じでも縮む長さは異なります。下は、内側の幅300pxで100pxが足りない場合です。

最後の行は、box-sizing: border-boxで、左右の内側の余白と枠線が合わせて40pxの場合です。縮める比率を内側の基準サイズ60 : 260で決めるため、余白がないとき(75 · 225)とは結果が変わります。このジェネレーターの「サイズの計算」カードは、この計算を「足りない100のうち (1 × 60) / 320」のようにそのまま書いて示します。shrinkの合計が1未満のときも、growと同じ規則が使われます。内側300pxで基準サイズ200・200のアイテムにshrinkを0.2ずつ指定すると合計は0.4なので、足りない100pxのうち40%の40pxだけを縮めて180 · 180になり、残りの60pxははみ出します。

縮まないアイテム: min-width: auto

flex-shrinkが1でも、アイテムは内容の最小幅より小さくなりません。スクロールコンテナではないflexアイテムでは、min-width(縦方向ならmin-height)の初期値autoが「内容に基づく最小サイズ」として計算されるからです(仕様§4.5)。折り返せる箇所のない長いURL、white-space: nowrapを指定した文字、元のサイズが大きい画像などは、そのためコンテナを突き抜けてあふれます。例「縮まない長いURL」で、ステージの右側に描かれる赤い斜線があふれた長さです。

• そのアイテムにmin-width: 0を指定すると、内容より小さく縮められます。ただし文字が自動で折り返されるわけではないので、overflow-wrap: anywhereや省略表示で、あふれた文字を別に処理します。
• overflowをhiddenやautoのようなvisible以外の値にすると、そのアイテムはスクロールコンテナになり、自動の最小サイズが0になります。
• 縦方向の中にスクロールするリストを入れたのに、リストがスクロールせず伸びるだけなら、そのアイテムにmin-height: 0が必要なことが多いです。
• 日本語は、初期設定でも文字と文字の間で行を折り返せるため、最小幅が1文字分ほどまで小さくなります。word-break: keep-allを使うとこの折り返しが減り、最小幅がかえって大きくなるため、日本語ではおすすめしません。

autoマージンで1つだけ押しやる

横並びのアイテムにmargin-left: autoを指定すると、そのマージンが余った空間をすべて受け取り、アイテムが末尾側へ押しやられます。仕様では、justify-contentやalign-selfで配置する前に、正の余った空間をまずautoマージンに分けると定めています(§8.1)。そのため、autoマージンのある行では、justify-contentを変えても動きません。例「ナビゲーションバー」は、ログインにだけ前側のautoマージンを付けて、ほかのメニューを左に、ログインだけを右端に置いています。両側にautoを指定すると、そのアイテムは余った空間の真ん中に置かれます。このジェネレーターの「主軸のautoマージン」は、方向に合わせてmargin-left・right・top・bottomのうち適切なものをコードに書き出します。

gapと余った空間が同時にあるとき

flexコンテナは、次の順序で空間を決めます。まず内側のサイズからアイテムの間のgapを引き、残りの空間をgrowやshrinkで分けます。それでも空間が残れば、autoマージン、その次にjustify-contentが配置します。「サイズの計算」の1行目「内側のサイズ − 間隔 − 基準サイズの合計 = 余った空間」がこの順序そのものです。row方向ではcolumn-gapが同じ行のアイテムの間、row-gapが行と行の間に入り、column方向ではその逆になります。

gapはアイテムの間にだけ生じ、コンテナの枠線と最初のアイテムの間には生じません。外側の余白は、親のpaddingで付けます。space-betweenとgapを併用すると、見える間隔はgapより広くなり、アイテムが1つだけの行にはgapがありません。

orderとreverseは見た目の順序だけを変えます

orderは、値が小さいアイテムから先に置き、同じ値どうしはHTMLの順序に従います。row-reverseとcolumn-reverseも、画面上の順序だけを逆にします。キーボードのTab移動やスクリーンリーダーはHTMLの順序に従うため、仕様はorderを論理的な順序ではなく視覚的な順序を変えるためだけに使うよう求め(§5.4)、orderや*-reverseを正しいソース順の代わりに使わないよう書いています(§5)。このジェネレーターのステージでも、矢印キーは画面上の位置ではなくHTMLの順序(番号順)でアイテムを移ります。

ブラウザ対応

表の数字は、MDNのブラウザ互換性データに記載された、最初に対応したバージョンです。flexレイアウトでのgapに対応していない古いブラウザまで考慮する場合は、アイテムのmarginで間隔を代用します。

よくある間違い

• 縦方向の中央揃えができません。 親の高さが内容の高さと同じで、交差軸に余った空間がない場合です。親にheightやmin-heightを指定します。
• columnでjustify-contentが動きません。 縦方向の主軸は高さなので、親の高さが決まっていないと余った空間が生まれません。
• flex: 1を指定したのに幅が違います。 長い単語や画像のせいで、内容の最小幅が受け取る分より大きいアイテムがあります。そのアイテムにmin-width: 0を検討します。
• 最後の行のカードだけ広がります。 行ごとに余った空間を別々に分けるためです。列の幅をそろえるにはGridを使うか、growを0にします。
• 孫要素まで配置しようとしています。 display: flexは、直下の子だけをflexアイテムにします。内側の要素を配置したいなら、その親にもdisplay: flexを指定します。
• centerにしたら、あふれた先頭側が切れます。 アイテムがあふれると、centerは両側へはみ出し、先頭側はスクロールでも見えなくなります。Chromium 151で、200pxのコンテナに300px分を置くと、最初のアイテムが50px手前へ出ました。justify-content: safe centerに変えると先頭側に付きました。
• orderで順序を変えたのに、Tabの順序は変わりません。 仕様どおりの動作です。読む順序まで変えたいなら、HTMLの順序を直します。

制限と注意

• ステージが表示するのは、左から右へ横書きする向きだけです。rtlや縦書きの文書では、始点の側が変わります。
• アイテムの中には文字を1まとまり入れられるだけです。画像、固定幅の子要素、内側にflexがある実際の画面では、最小幅が異なる結果になります。
• サイズの計算は、いまのブラウザで測った内容のサイズ(max-content・min-content)で仕様§9.7を計算し直します。1px以上ずれる行があれば、その行にはブラウザの値を表示し、別に知らせます。
• flex-basisが内側の余白 + 枠線より小さい場合(例: border-boxで0)、仕様の注記は外側の基準サイズを0として説明しています。Chromium 151は内側の余白 + 枠線から始めて計算しており、このジェネレーターもその結果に合わせた値を使います。
• 最大サイズ(max-width・max-height)と、align-selfの交差軸のautoマージンは操作できません。
• コピーしたコードはメディアクエリを作りません。画面幅に応じて方向を切り替えるルールは、別に書く必要があります。
• リンクのコピーは、アイテムの文字までURLに含めます。他人に見せたくない文字は入れないでください。

基準日 W3C CSS Flexible Box Layout Module Level 1(Candidate Recommendation Draft 2025-10-14)、CSS Box Alignment Module Level 3(Working Draft 2026-10-08)、MDNのブラウザ互換性データは、2026-10-21に原文で確認しました。表の数字はこのジェネレーターの計算コアで求め、代替の配置・align-content・基準サイズの下限はChromium 151で測った結果です。

出典

• 01W3C: CSS Flexible Box Layout Module Level 1Candidate Recommendation Draft 2025-10-14。§4.5 自動の最小サイズ、§5・§5.4 順序とアクセシビリティ、§7.1.1 flexの既定値(initial・auto・none・数値)、§8.1 autoマージン、§8.4 align-content、§9.3 行の分割、§9.7 柔軟な長さの解決(shrink × 内側の基準サイズ、growの合計 < 1)
• 02W3C: CSS Box Alignment Module Level 3Working Draft 2026-10-08。§4.3 分配値と代替の配置(space-between = safe flex-start、space-around・space-evenly = safe center)、§4.4 safe・unsafe、§5.1.3 flexコンテナでのnormalの動作
• 03MDN: Basic concepts of flexbox主軸・交差軸、開始線と終了線、flexアイテムの基本の動作
• 04MDN: flexブラウザ互換性の表: 接頭辞なしでChrome 29・Firefox 22・Safari 9
• 05MDN: flex-basisブラウザ互換性の表: content はChrome 94・Firefox 61・Safari 15.4、min-content・max-content はChrome 94・Firefox 66・Safari 16
• 06MDN: gapブラウザ互換性の表: flexレイアウトでChrome 84・Firefox 63・Safari 14.1
• 07MDN: order画面上の順序と読む順序がずれることへのアクセシビリティ上の注意、ブラウザ互換性の表 Chrome 29・Firefox 20・Safari 9

よくある質問

あわせて使うツール