Flexbox Playground

使い方

1. flex-direction を選びます：row、column、または各 reverse 系。
2. justify-content と align-items を変えて、子要素が主軸・交差軸でどう動くか確認します。
3. flex-wrap を切り替えて、スペースが足りないときの折り返しを観察します。
4. gap スライダーと子要素の数を調整します。
5. 生成された CSS ブロックをコピーしてスタイルシートへ貼り付けます。

よくある用途

• 軸の理解を深める — 子要素の動きを見ながら主軸と交差軸の違いを体で覚える。
• カードの中央寄せ — 2 つの center を組み合わせ、書く前に結果を確認。
• スペーシング方式の選定 — space-between・space-around・space-evenly を並べて比較。
• レイアウトのデバッグ — ローカルで再現し、動く組み合わせを実スタイルへ反映。

よくある質問

Q: 対応しているプロパティは？ A: コンテナレベルの 5 つ：flex-direction、justify-content、align-items、flex-wrap、gap です。生成結果を予測可能に保つため、flex-grow などの子要素レベルのプロパティは含めていません。

Q: 古いブラウザでも動きますか？ A: 表示されるプロパティは現行の flexbox 仕様に含まれ、モダンブラウザならすべて対応しています。flex コンテナの gap は比較的新しいブラウザが必要で、旧 Safari では margin ベースの代替が必要な場合があります。

Q: 自分のマークアップで試せますか？ A: プレビューは生成された子要素のみです。コピーした CSS を自分の要素に適用して、そこから調整してください。