CSS Flexbox ジェネレーター & プレイグラウンド
プレビューを見ながら方向・折り返し・配置・間隔を変えて、コンテナ用の CSS ルールを組み立ててコピーできます。
ブラウザ内でローカルに実行 · display: flex · 配置 · 間隔
プレビューを見ながら方向・折り返し・配置・間隔を変えて、コンテナ用の CSS ルールを組み立ててコピーできます。
ブラウザ内でローカルに実行ワークベンチが書き出すのはコンテナ用の 1 つのルールだけです。display: flex に flex-direction、flex-wrap、justify-content、align-items、align-content、gap が続きます。ライブステージには番号付きのボックスが並び、ルールをスタイルシートへ移す前に各コントロールの組み合わせを確認できます。
実行ボタンはなく、プレビューとコード欄は操作のたびに更新されます。CSS をコピーするとそのテキストがそのままクリップボードに入り、リセットで読み込み時の状態（row、wrap、flex-start、stretch、stretch、16 px、6 アイテム）に戻ります。
flex-direction は主軸の向きとボックスの並び順を、flex-wrap は要素を新しい行へ送るかどうかを決めます。justify-content は主軸方向の余白を配分するため、行が埋まりきっていないときほど効果が分かりやすくなります。
align-items は行の中での要素の位置を、align-content は行そのものの配分を担当します。align-content が動くのはコンテナが実際に複数行へ折り返したときだけです。nowrap や 1 行だけの状態では、CSS に宣言が残っていても表示は変わりません。
ステージにはアイテム数で指定した数だけ番号付きのボックスが描画され、CSS に出力されるのと同じ値が反映されます。見出しの横のヒントは主軸と交差軸の向きを示し、column 系の向きを選ぶと矢印が入れ替わります。
アイテム数はプレビュー専用のコントロールで、書き出されるルールには含まれません。align-items が stretch の間はボックスがコンテナの高さまで伸びるので、行の違いを比べたいときは別の配置や固定の間隔を選んでください。
生成コードは .flex-container の 1 ブロックだけです。display: flex と 6 つの宣言が表示どおりの順序で並び、要素ごとのルールやベンダープレフィックス、メディアクエリは含まれません。クラス名と値を必要な形に変えるだけで使えます。
処理はすべてブラウザー内で完結し、入力した値や選択内容がページの外へ送られることはありません。CSS をコピーは同じテキストをクリップボードへ書き込み、ステータス行に結果を表示します。