CSS Flexboxプレイグラウンド

Flexbox（CSS Flexible Boxレイアウト）は、アイテムを1行または1列に並べ、その間のスペースを分配するための一次元レイアウトモデルです。親要素に1行——display: flex——を追加するだけで有効になり、子要素がflexアイテムになります。floatや手動マージンなしに整列・配置・サイズ調整が可能です。中央揃え、等高カラム、ナビゲーションバー、カード列など一般的な作業を簡単にするために使われます。

コンテナー要素にdisplay: flexを追加し、コンテナープロパティで子要素を制御します——flex-direction（rowまたはcolumn）、justify-content（メイン軸に沿った間隔）、align-items（クロス軸の整列）、flex-wrap、gap。例えば.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }はロゴとリンクを縦に中央揃えして両端に配置します。

親をflexコンテナーにして両軸で中央揃えします：.parent { display: flex; justify-content: center; align-items: center; }——これで子要素が水平・垂直の正確な中央に配置されます。中央揃えするスペースが必要なので親に高さを設定してください（例：全画面中央揃えならmin-height: 100vh）。1つの要素を完全に中央揃えする最もきれいな方法です。

justify-contentはメイン軸に沿ってアイテムを配置し、align-itemsはクロス軸に沿って配置します。メイン軸はflex-directionで決まります。デフォルトのflex-direction: rowでは、justify-contentが水平方向の間隔、align-itemsが垂直方向の整列を制御します。flex-direction: columnに切り替えると、両者の役割が入れ替わります。ツールのライブ軸ガイドが方向を変えるとその関係を示してくれます。

flexアイテムのサイズを決める3つのアイテムごとのプロパティで、通常flexショートハンドとしてまとめて書きます。flex-basisは空きスペースを共有する前の初期サイズです。flex-growは余ったスペースを埋めるためにどれくらい積極的に拡大するかを示します（0＝拡大しない、1＝シェアを取る）。flex-shrinkはスペースが不足したときにどれくらい縮小するかを示します。よく使うflex: 1はすべてのアイテムが均等に拡大することを意味します。

コンテナーにflex-wrap: wrapを設定すると、収まりきらないアイテムがはみ出したり押しつぶされたりするのではなく、新しい行に移動します。デフォルトのflex-wrap: nowrapはすべてを1行に強制します。折り返しを有効にしたら、各行がきれいに埋まるようにアイテムにflex-basis（例：flex: 1 1 200px）を設定し、align-contentで生成された行を整列させましょう。

登録不要で無料です。プレイグラウンド全体がブラウザで動作します——レイアウト、生成されたCSS、共有リンクはすべてデバイス上で作成され、サーバーにアップロードされることはありません。ページが読み込まれたらブックマークしてオフラインで使えます。アカウント作成は不要で、設定できるレイアウト数に制限はありません。