CSS Flex レイアウトの視覚的編集

機能

• 7つのプロパティにそれぞれボタン列：display・flex-direction・flex-wrap・justify-content・align-items・align-content・子要素の伸縮
• グリッド背景つきのプレビューで、位置の効果がすぐ判断できます
• 子要素の数（1〜8）と間隔（0〜64px）を調整できます
• 「なぜ変化が見えないのか」：現在の設定から判断して説明します（align-content は複数行が必要、space-* は余白が必要、baseline は基準線が違う必要、固定幅 + nowrap は溢れる）
• 逆方向の指定には「見た目の順序だけが変わり、Tab と読み上げは DOM 順のまま」という注意を出します
• 選択中の値には、その行の下に一句の説明が出ます
• コピーされるのは完全な2ブロックの CSS（コンテナと子要素）と対応する HTML
• プレビューとコードは同じ1組の宣言から作られるので、見たままがコピーされます

使い方

1. ボタン列をいくつか押して、プレビューの変化を見ます
2. 子要素の数と間隔を調整して、自分の場面に近づけます
3. プレビュー下に「なぜ変化が見えないのか」が出ていないか確認します
4. CSS と HTML をコピーして自分のページに貼ります

よくある質問

justify-content と align-items はどちらがどちらの方向ですか？

`justify-content` が主軸、`align-items` が交差軸です。主軸は `flex-direction` で決まり、`row` なら主軸は横（justify が左右、align が上下）、`column` なら主軸が縦になって両者の役割が入れ替わります。つまり「上下左右の中央に置くには」の答えは direction 次第で、既定の `row` では `justify-content: center` と `align-items: center`、`column` では同じ2行が逆の意味になります。direction のボタンを押すと入れ替わりが見えます。

align-content を変えても何も起きないのはなぜですか？

`align-content` は行と行の間を配分するもので、行が1つしかないと配分する対象がありません —— `flex-wrap: wrap` で実際に複数行になって初めて効きます。`nowrap` のときツールはこの行を出力コードに含めません（含めると誤解を招くため）し、プレビュー下で理由を説明します。見たいときは wrap を `wrap` にし、子要素を「固定幅」にして、数を6以上に増やしてください。

space-between が flex-start と同じに見えるのはなぜですか？

`space-*` が配分するのは余白なので、余白がゼロならどれも同じ見た目に退化します。よくある原因は子要素がコンテナを埋めていること —— 伸縮が「等分」か「固定幅」になっている、あるいはコンテナの幅がちょうど足りている場合です。伸縮を「中身に合わせる」にして数を減らすか、コンテナを広くすると違いが見えます。

flex: 1 と flex: 1 1 auto は何が違いますか？

`flex: 1` は省略記法で `flex: 1 1 0%`（basis が 0）に展開され、`flex: 1 1 auto` は basis が内容の幅になります。この差は中身の長さが違うときに現れます：basis 0 なら中身に関係なくコンテナを等分し、basis auto ならまず内容の幅を取り、余りを比率で配分するので長いほうが広くなります。このツールの「等分」と「中身に合わせる」がまさにその違いです —— 切り替えて子要素1と2の幅を見てください。