FIRST CH TOOLS / デザイン / 62 FLEXBOX & CSS GRID GENERATOR

Flexbox / CSS Grid ジェネレーター

レイアウトのCSSをGUIで動かしながら決めて、コードだけ持ち帰るツールです。Flexboxは justify-content・align-items・gap・flex-wrap、Gridはテンプレート列/行と grid-template-areas に対応。選んだ値が何をするプロパティなのかを日本語で表示し、いまの組み合わせでは効かない指定も指摘します。

プレビュー枠の高さ200px

点線がコンテナ（.layout）、朱色の箱が子要素です。箱をクリックするとその子要素が編集対象になります。トラックの合計幅が枠より広い設定は枠ごと横スクロールします——実際のページでも同じようにあふれるためです。

コンテナのプロパティ（Flexbox）

display

flex は横幅いっぱいのブロック、inline-flex は文章の途中に置ける（中身の幅になる）箱になります。

flex-direction

子要素を並べる向き（主軸）を決めます。この1つで他のプロパティの意味が変わります。

flex-wrap

入りきらない子要素を次の行へ送るかどうか。

justify-content

主軸の余った場所をどう配るか（横並びなら左右の寄せ方）。

align-items

交差軸（主軸と直角の向き）での子要素の揃え方。横並びなら縦の位置です。

align-content

折り返して2行以上になったときの、行のまとまりの置き方。1行しかないと何も起きません。

gap（行） 12px

gap（列） 12px

子要素のあいだだけに入る余白です（外側には付きません）。行と列が同じ値なら gap: 12px の1つにまとめて出力します。

子要素の数子要素 4 個

中身の大きさをばらつかせる

プレビュー用の設定です（生成されるCSSには影響しません）。大きさがそろっていると align-items の違いが見えないため、既定でばらつかせています。

選んでいる子要素

flex-grow 0

余った場所を受け取る比率。0なら伸びません。1つだけ1にすると、その子要素が余白を全部吸って残りが端に寄ります。

flex-shrink 1

入りきらないときに縮む比率（既定は1）。0にすると縮まないので、アイコンやボタンが潰れるのを防げます。

flex-basis

伸び縮みを計算する出発点の大きさ。auto は中身の大きさ、0 はゼロから配り直す指定です。

align-self

この子要素だけ align-items を上書きします。

order 0

並ぶ順（既定0・小さいほど先）。見た目の順だけが変わり、Tabキーの移動順と読み上げ順はHTMLのままなので、多用しないでください。

トラックとエリア（CSS Grid）

列を自動で折り返す（repeat(auto-fit, minmax())）

grid-template-columns

grid-template-rows

fr は余った場所の取り分、auto は中身なり、minmax(160px, 1fr) は「160pxは確保しつつ余りも受け取る」。同じ値が続くトラックは repeat() にまとめて出力します。

gap（行） 12px

gap（列） 12px

マスのあいだの溝です。fr の計算は gap を引いた残りに対して行われるので、gap を増やしてもトラックがはみ出しません。

grid-auto-flow

位置を指定していない子要素を自動で置いていく向き。

justify-items

マスの中での子要素の横方向の置き方。

align-items

マスの中での縦方向の置き方。justify-items と合わせて place-items の1行にも書けます。

justify-content

グリッド全体をコンテナの中で横にどう置くか（マスの中身ではなく、トラックのまとまりが動きます）。

align-content

グリッド全体の縦の置き方。コンテナに高さがないと余白が生まれないので、何も起きません。

子要素の数子要素 6 個

プレビュー用の設定です。トラック数より多い子要素は暗黙のトラック（grid-auto-rows）に置かれます。

grid-template-areas 名前でレイアウトする

オフのあいだは、子要素を自動配置で並べます。

選んでいる子要素

列をまたぐ 1

grid-column: span 2; のように、横に何マス分を占めるか。

行をまたぐ 1

縦に何マス分を占めるか。列と行の両方を2にすると、2×2の大きなマスになります。

プロパティの意味と、つまずきやすいところ

Flexbox は「1方向」、Grid は「2方向」

並べたいものが1列（または1行）なら Flexbox、行と列の両方をそろえたいなら Grid です。ナビゲーション・ボタンの並び・ラベルと入力欄のように「横一列に置いて余白を配る」用途は Flexbox が短く書けます。カードを縦横そろえて敷き詰める、ヘッダー／サイドバー／本文の骨組みを作る、といった縦横の線をそろえたい場面は Grid です。入れ子にして併用するのが普通で、どちらかに統一する必要はありません。

主軸と交差軸——flex-direction で意味が入れ替わる

Flexbox の justify-content は主軸、align-items は交差軸のプロパティです。flex-direction: row なら主軸＝横なので前者が横・後者が縦を動かしますが、column にすると2つの役割がそっくり入れ替わります。「縦中央にしたいのに align-items: center が効かない」の多くは、direction が column になっているのが原因です。

justify-content が効かないとき

このプロパティが配るのは余った場所だけです。子要素に flex-grow: 1（や flex: 1）が付いていると、余白は子要素が全部吸ってしまうので配る余りが残らず、何を指定しても見た目が変わりません。Grid でも同じで、1fr のトラックがあると justify-content は効きません。動かしたいなら、まず伸びる指定を外します。

align-content は「行」を動かす

名前が似ていますが、align-items が1行の中での子要素、align-content が折り返してできた行そのものを動かします。flex-wrap: nowrap では行が1本しかないため、align-content はまったく効きません。逆に Grid では常に複数トラックがあるので、align-content がグリッド全体の縦位置を決めます。

space-between と space-evenly の違い

space-between は両端を端にぴったり付けて間だけに余白を配ります。space-around は各子要素の左右に同じ余白を付けるため、端の余白が間の半分に見えます。見た目に等間隔なのは space-evenly だけです。なお space-between は子要素が1つだと先頭寄せと同じ見え方になるので、件数が変わる一覧では注意してください。

flex: 1 の正体は3つの値

flex は flex-grow flex-shrink flex-basis の一括指定で、flex: 1 は 1 1 0% の意味です。basis: 0 は「中身の幅を無視して、行の全幅を grow の比で配る」ので、文章量の違う3つの箱がきれいに3等分されます。いっぽう flex: 1 1 auto は先に中身の幅を確保してから余りを配るため、同じ grow でも幅はそろいません。等分したいなら basis を 0 にしてください。

Flexの子要素は中身より狭くならない

flex の子要素には min-width: auto が効いていて、中身の最小幅より狭くは縮みません。長いURL・表・pre が入った箱が行からあふれる、テキストが省略されない（text-overflow: ellipsis が効かない）といった症状はほぼこれです。その子要素に min-width: 0（縦並びなら min-height: 0）を足すと解決します。Grid の 1fr も最小値が auto なので、同じ理由であふれます——こちらは minmax(0, 1fr) と書きます。

fr は「余りの取り分」であって割合ではない

1fr 1fr 1fr が3等分に見えるのは、たまたま余りが全部だからです。240px 1fr のように固定トラックが混ざると、1fr は240pxと gap を引いた残りを受け取ります。grid-template-columns: 1fr 2fr は1:2、50% 1fr は「半分＋残り」です。パーセントは gap を考慮しないので、合計100%＋gap は必ずあふれます——固定幅とパーセントを混ぜるより、fr に寄せるほうが安全です。

auto-fit と auto-fill の違いは1点だけ

repeat(auto-fit, minmax(200px, 1fr)) はメディアクエリなしで折り返すカード列の定番です。auto-fill との違いは、中身のない余ったトラックを畳むか残すか。カードが2枚しかない広い画面では、auto-fit は2枚が伸びて画面いっぱいになり、auto-fill は2枚が元の幅のまま左に寄って右に空きが残ります。どちらが正しいかは作りたい絵次第です。

grid-template-areas は長方形でなければ無効

エリア名で組む書き方は、CSSを見ただけで画面の骨組みが読めるのが利点です。ただし制約が2つあります: すべての行のマス数が同じであること、同じ名前が長方形になること。L字や飛び地になると、ブラウザは値を丸ごと捨ててレイアウトが一気に崩れます（1マスだけ間違えても全体が壊れます）。このツールは入力のたびに両方を検証します。空きマスは . です。

gap は margin と違って外側に付かない

gap は子要素のあいだにだけ入るので、「最後の要素だけ margin-right を消す」定番の後始末が要りません。相殺（margin collapse）も起きません。注意点は対応ブラウザで、Flexbox の gap は Safari 14.1（2021年）以降です（Grid の gap はもっと古くから使えます）。それ以前のSafariでは隙間が消えるだけで、レイアウト自体は崩れません。

順番を変えるプロパティは読み上げ順を変えない

order・row-reverse・grid-auto-flow: dense・エリア名での配置は、どれも描く順だけを変えます。Tabキーの移動順とスクリーンリーダーの読み上げ順はHTMLのままなので、見た目と操作順が食い違い、キーボードだと画面を行ったり来たりする状態になります。並べ替えは「狭い画面で1か所だけ」に留め、基本はHTMLを読む順に書いてください。

中央寄せの最短手

縦横中央は display: grid; place-items: center; の2行が最短です（place-items は align-items と justify-items の一括指定）。Flexbox なら display: flex; align-items: center; justify-content: center;。どちらでも同じ絵になりますが、中身が1つだけなら Grid のほうが短く、複数を横に並べて余白も配るなら Flexbox が向きます。

暗黙のトラック（書いていない行）

子要素がトラック数を超えると、ブラウザは書いていない行を勝手に足します（暗黙のトラック）。その高さは grid-auto-rows で、既定は auto＝中身なりです。「3行目だけ高さがそろわない」のは grid-template-rows に3行目を書いていないからで、grid-auto-rows: 120px のように指定すれば後続の行にも同じ高さが効きます。

子要素の数

1行

折り返し／トラック

コンテナの宣言数

CSSの文字数

生成したCSS

対応するHTML

チェック結果

文字サイズを画面幅に追従させるなら CSS clamp() フルイドタイポグラフィ計算機、余白やフォントの px と rem の換算は PX ⇄ REM / EM 単位変換、背景は CSSグラデーションジェネレーター、カードの影は box-shadow ジェネレーターで決められます。

How to Use

Flexbox か CSS Grid を選ぶ横1列（または縦1列）に並べて余白を配るなら Flexbox、行と列の両方をそろえるなら CSS Grid です。「プリセット」タブから近いものを読み込んで直すのがいちばん速い道です。
プレビューを見ながら値を動かす選んだ値の意味がそのすぐ下に日本語で出ます。プレビューの箱をクリックすると、その子要素だけ flex や span を上書きできます。効かない指定はチェック結果が理由つきで指摘します。
CSSとHTMLをコピーするコンテナの宣言と、既定値と違う子要素の宣言だけが出力されます。.layout の名前はプロジェクトに合わせて置き換えてください。

About This Tool

レイアウトCSSは、書いて・読み込んで・見て直す往復に時間が溶けます。このツールは Flexbox と CSS Grid のコンテナ／子要素のプロパティをその場で動かし、プレビューと出力CSSを同時に更新します。プレビューは「生成したCSSと同じ宣言」をそのまま要素へ流し込んで描いているので、画面で見えている絵とコピーできるコードがずれません。出力されるのはコンテナの宣言と、既定値と違う子要素の宣言だけです（flex-wrap: nowrap のような既定値は書き出しません）。

プロパティ名の日本語解説つきで、学習にも使えます。選択肢を変えるたびに、そのプロパティが何を配るのか・いま選んだ値がどう動くのかを1行で表示します。さらに「その指定は今の組み合わせでは効かない」を指摘します——flex-grow が付いていると justify-content に配る余白が残らない、flex-wrap: nowrap では align-content が動かない、1fr のトラックがあると justify-content が効かない、といった「効かないのに書かれている宣言」はレビューでも見落としがちです。

grid-template-areas は入力のたびに検証します。CSSの仕様では、行ごとのマス数が揃っていない／同じ名前が長方形になっていない値は丸ごと無効になり、1マスの打ち間違いでレイアウト全体が崩れます。このツールは各行のマス数と、名前ごとの占有範囲が長方形かどうかを毎回確かめて、崩れる前に理由を出します。生成したHTMLはエリア名をそのままクラス名に使うので、CSSとHTMLを貼れば同じ骨組みが再現できます。すべての処理はブラウザ内で完結し、入力はサーバーへ送信されません。