このツールについて
Flexbox はモダンな CSS レイアウトの基盤ですが、そのプロパティは実際に動かして見るまで覚えにくいものです。このジェネレーターは flex-direction・justify-content・align-items・flex-wrap・gap をシンプルなコントロールに変え、何かを変えるたびに並び替わる実際のアイテムの列を表示します。
プロパティがどう相互作用するかを理解する最速の方法です——レイアウトが良ければ、コンテナの CSS をコピー。すべてブラウザ内で動作します。
よくある質問
生成されるCSSはコンテナ用ですか、それとも個々のアイテム用ですか？
親コンテナのflexプロパティ（flex-direction、justify-content、align-items、flex-wrap、gap）を生成します。flex-growやorderのようなアイテムごとのプロパティは対象外です。
justify-content と align-items の違いは何ですか？
justify-content は主軸方向（row レイアウトでは水平方向）の間隔を制御し、align-items は交差軸方向（row レイアウトでは垂直方向）の配置を制御します。
モダンなプロジェクトでflexboxにベンダープレフィックスは必要ですか？
いいえ、現行のブラウザはすべてプレフィックスなしのflexboxプロパティをサポートしています。古い -webkit-box / -ms-flexbox 構文が必要なのは10年以上前のブラウザだけです。
レイアウトのデータはどこかにアップロードされますか？
いいえ。プレビューと生成されたCSSはすべてブラウザ内で完結しており、サーバーには何も送信されません。
一部の古いブラウザでgapの値が反映されないのはなぜですか？
flexコンテナ内のgapプロパティは2021年以降にリリースされたすべてのブラウザでサポートされています。それより古いブラウザでは、代わりにアイテムのmarginを使用してください。