CSS Flexbox ジェネレーター
CSS flexbox レイアウトを視覚的に構築できます。コンテナに対する flex-direction、justify-content、align-items、flex-wrap、gap に加え、子要素ごとの flex-grow、flex-shrink、flex-basis を設定し、すべてライブプレビューとコピー可能な CSS で確認できます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
flexbox レイアウトには二つの別々のルールブックがあります。コンテナに対するプロパティ（flex-direction、justify-content、align-items、flex-wrap、gap）と、各子要素に対するプロパティ（flex-grow、flex-shrink、flex-basis）です。これらを混同することが、「中央揃えにならない」「伸びてくれない」「折り返さない」といった期待通りに動作しないバグの最も一般的な原因です。このジェネレーターは両方のルールブックを同時に画面に表示します。コンテナのコントロールや子要素のフィールドを変更すると、三つの番号付きで色分けされたボックスが即座に更新されるため、原因と結果が目に見えるままです。
コンテナ側では、あらゆるレイアウト軸をカバーします。方向の選択、justify-content による主軸に沿った子要素の分配方法、交差軸での配置、新しい行への折り返しの有無、マージンハックの代わりとなる gap の設定。子要素側も同様に現実的です。ボックスを最大八つまで追加、最小二つまで削除し、任意のボックスに独自の flex-grow、flex-shrink、flex-basis を与えます。ジェネレーターは、それらのうち少なくとも一つがブラウザのデフォルトと異なる場合にのみ、子要素ごとの CSS ルールを出力します。そのため、コピーしたコードが、不要なボックスに flex-grow: 0 などと無駄に埋められることはありません。
プリセットページでは、人々が実際に名前で検索するレイアウトにすぐに飛べます。div を中央揃えにする方法（CSS レイアウトの質問で最も多いもので、justify-content と align-items を両方 center に設定することで解決）、左ロゴ・右リンクのナビゲーションバー、flex-grow による均等幅のフレキシブルカラム、そして space-between とその類似プロパティである space-around および space-evenly の並列比較です。
このサイトのすべてのツールと同様に、このジェネレーターは無料で、完全にブラウザ内で動作します。アップロード不要、アカウント不要で、ページを一度読み込めばオフラインでも動作し続けます。