Flexbox エディター

Flexbox ビジュアルエディターとは？#

Flexbox は、要素を単一方向（行または列）に沿って配置し、要素間の余白を分配するための CSS レイアウトエンジンです。かつては float、負のマージン、試行錯誤を必要とした疑問に答えます — 「これを垂直中央寄せするには？」「3 つのカラムを同じ高さにするには？」「1 つのアイテムを右端に追いやり、残りは左に残すには？」など。一度理解すれば、ほぼすべてのページで Flexbox に手が伸びるようになります。しかし仕様が、ありふれた英単語に極めて精密なレイアウト上の意味を持たせているため、そのプロパティ名（justify-content、align-items、flex-grow）は熟練開発者でさえつまずかせます。

本ページは Flexbox のライブプレイグラウンドです。左のサイドバーでコンテナのプロパティとアイテムごとの上書きを調整すると、右のペインに結果が即座に反映され、それを実現したコピー＆ペースト即席の CSS が書き出されます。どの値が何をするか推測するのをやめ、変更した瞬間に効果を確認して、うまくいったルールをコピーする — それがこのツールの目的です。

使い方#

レイアウトはコントロールの サイドバー と、プレビュー＋CSS 出力 パネルに分かれています。

1. コンテナを設定します。 サイドバーのドロップダウンを使います。
   • 方向 — row、row-reverse、column、column-reverse。
   • コンテンツの配置 — 主軸に沿って余白を分配します: flex-start、center、flex-end、space-between、space-around、space-evenly。
   • アイテムの整列 — 交差軸に沿って子要素を配置します: stretch、flex-start、center、flex-end、baseline。
   • 折り返し — nowrap は全要素を 1 行に保ちます。wrap と wrap-reverse は子要素に新しい行へ流れ込むことを許可します。
   • 複数行の整列 — 折り返しがオンのときだけ現れ、折り返された子要素の 行 間のスペースを調整します。
   • ギャップ — 0〜64 px のスライダー。ライブ値がラベルの横に表示されます。
2. アイテムを管理します。 アイテム 見出しの下で、アイテム追加 が flex の子をもう 1 つ挿入します。各アイテム行には 伸長率、縮小率、基本サイズ、順序、個別整列（コンテナの align-items の子要素単位の上書き）があります。アイテム %n を削除 で子要素を削除できます。
3. プレビューを確認します。 右側の大きなボックスは実際の flex コンテナで、変更のたびに即座に再描画されます。
4. CSS をコピーします。 生成されたルールブロックがプレビューの下にあります。コピー をクリックして取得します。すべてのアイテムが同じ値を共有する場合は単一の .item ブロックが出力されます。いずれかのアイテムが異なる瞬間に、出力は子要素ごとの .item:nth-child(N) ブロックに切り替わり、各上書きが曖昧になりません。

主な機能#

• コンテナと子要素ごとのプロパティを 1 箇所に。 Flexbox の何も隠されていません — flex-direction、両方の整列軸、折り返し、gap、アイテムごとの grow/shrink/basis/order/align-self がすべてライブです。
• 正確で最小限の CSS 出力。 align-content は折り返しが実際にオンのときだけ出力されます（1 行では何もしません）。同じアイテムは 1 ブロックに畳み込まれます。order と align-self は非既定値のときだけ現れます。出力は、見た目を再現する最短のルールです。
• flex ショートハンドを正しく処理。 各子要素は flex: <grow> <shrink> <basis> としてシリアライズされます — ショートハンドの省略値がもたらす意外な既定値を避ける、標準的な 3 値形式です。
• 基本サイズを検証。 auto、0、200px、50%、10rem を入力すると受理されます。無効な基本サイズはフラグ付けされ、壊れた CSS を黙って生成する代わりに auto にフォールバックします。
• プレビューは左から右に固定。 Flexbox の row は左から右のセマンティクスと定義されているため、プレビューはページの言語に関わらず LTR に固定されます — 見た目がスタイルシートの動作と一致します。

実例#

よくあるレイアウトです。ロゴを左に固定し、残りスペースを取るタイトル、アクションを右に固定したヘッダー行 — 一定のギャップで均等配置。

• 方向: row
• コンテンツの配置: space-between
• アイテムの整列: center
• 折り返し: nowrap
• ギャップ: 16px
• アイテム: 3 つの子要素。中央は 伸長率 1 で余白を吸収し、残り 2 つは既定の flex: 0 1 auto。

生成される CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

2 番目の子要素が成長し、他は成長しないため、出力は正しく 3 つの独立した nth-child ブロックを使います。これをプロジェクトにドロップすれば、ロゴは左端、アクションは右端、タイトルは中央を埋めます — float もマージンも不要です。

よくある質問#

justify-content と align-items はどちらがどちらですか？#

justify-content は常に 主軸（flex-direction が設定する方向 — row では水平、column では垂直）に沿って働きます。align-items は常に 交差軸（主軸に直交）に沿って働きます。そのため row では、justify-content が左右の間隔を、align-items が上下の整列を制御します。方向を column に反転させると役割が入れ替わります。「justify = 主軸、align = 交差軸」と覚えれば、最も一般的な Flexbox の混乱を避けられます。

flex-grow はいつ実際に働きますか？#

余白 を吸収できるときだけです。3 つの子要素がそれぞれ flex-grow: 1 を持ち、コンテナが子要素の必要幅より広ければ、残りスペースが 3 等分されて均等に加算されます。コンテナがぴったり埋まっていれば、何も成長しません。flex-grow: 0（既定値）にすれば子要素は拡大を拒否し、兄弟にスペースを譲ります。flex-shrink はその鏡で、スペースが足りないときに誰が先に譲るかを決めます。

gap が効きません。なぜですか？#

よくある原因は 3 つです。子要素が固定幅を持ち、コンテナを完全に埋めている（ギャップの余地がない）、flex-wrap: nowrap が子要素を行に収まる代わりにオーバーフローさせている、子要素のマージンが視覚的にギャップを隠している。ここのスライダーは 64 px までです。それ以上必要な場合は、元のプロパティは任意の長さを受け付けるので、CSS をコピーして自分のファイルで gap を大きくしてください。

出力が nth-child を使っています — クラスに変えられますか？#

もちろんです。.item:nth-child(N) セレクターは、アイテムが異なるときにプレビューと一意に対応するため出力されています。実際のコードでは、独自クラス（.logo、.title、.action）に置き換えてください — 内部の宣言は同じままです。すべての子要素が一致するとき、ツールは 1 箇所でリネームできる単一の共有 .item ブロックを既に出力しています。