このツールについて
CSS Flexbox Playground は、フレックスコンテナの主要なレイアウトプロパティを扱うインタラクティブなエディターです。4つのドロップダウンから flex-direction、justify-content、align-items、flex-wrap の値を選ぶと、番号付きの5つのボックスのプレビューが瞬時に配置し直され、コードを書く前に各プロパティがレイアウトをどう形作るかを確認できます。
プレビューの下では、対応する .container ルールが作業に合わせて生成されます。display: flex に続いて、選んだ4つの宣言が並びます。ボタン1つでブロック全体がクリップボードにコピーされ、スタイルシートに貼り付けられます。公開されるのはこれらのコンテナレベルのプロパティだけで、flex-grow・order・align-self といった項目単位の設定は対象外です。
すべてはブラウザ内で動作します。何もアップロードされず、アカウントも追跡もなく、オフラインでも動作します。フレックスボックスの感覚をすばやくつかんだり、後で手で調整するための出発点となるルールを作ったりするのに向いています。
よくある質問
プレビューには何が表示されますか？
5つの番号付きボックスを収めたフレックスコンテナで、flex-direction・justify-content・align-items・flex-wrap を変えるとリアルタイムに配置し直されます。
生成された CSS はそのまま使えますか？
はい。生成された .container ルールをそのままスタイルシートにコピーできます。display: flex と選んだ4つのプロパティが含まれています。
どのフレックスボックスのプロパティを調整できますか？
4つのドロップダウンで flex-direction（row、row-reverse、column、column-reverse）、justify-content（flex-start、flex-end、center、space-between、space-around、space-evenly）、align-items（stretch、flex-start、flex-end、center、baseline）、flex-wrap（nowrap、wrap、wrap-reverse）を制御します。
出力に gap や項目単位の flex 設定は含まれますか？
いいえ。コピーされるルールには display: flex と4つのコンテナプロパティだけが含まれます。プレビューの 8px の gap は間隔を空けるためのもので、flex-grow・order・align-self といった項目単位のプロパティは含まれません。