CSS Flexbox ジェネレーター
CSS Flexboxレイアウトをビジュアルで作成。flex-direction・wrap・justify-content・align-itemsをリアルタイムプレビューで設定。無料オンラインツール。
使い方
- flex-directionを調整してメイン軸を設定します：row（水平）またはcolumn（垂直）。
- flex-wrapを設定してアイテムを複数行に折り返せるようにします。
- justify-contentでメイン軸のスペース配置を設定します。
- align-itemsでクロス軸上の配置を設定します。
- 複数行の折り返し動作にはalign-contentを調整します。
- ギャップでアイテム間のガターを設定します。
- アイテム数でプレビューボックスを追加・削除してレスポンスを確認します。
- コピーをクリックして生成された
.container { … }ルールをコピーします。
生成されるCSSについて
ジェネレーターは7つのプロパティを持つ .container ルールを出力します：
display: flex、flex-direction、flex-wrap、
justify-content、align-items、align-content、
gap。スタイルシートに貼り付け、.containerを自分のクラス名に変更してください。
Flexbox と Grid の使い分け
一次元レイアウト（単一の行または列に沿ったアイテムの配置）にはFlexboxを使います。 行と列を同時に制御する二次元レイアウトにはCSS Gridが適しています。 実践では、Flexboxはコンポーネントレベルのレイアウト（ナビゲーション、ボタングループ、フォーム行）に優れ、 Gridはページレベルの構造に向いています。
FAQ
CSS Flexbox とは何ですか？
CSS Flexbox（フレキシブルボックスレイアウト）は、1つの軸（行または列）に沿ってスペースを分配する一次元レイアウトモデルです。ナビゲーションバー、ツールバー、カード行、要素の中央揃え、単一方向に沿って柔軟に並べる必要があるUIに最適です。
justify-content と align-items の違いは何ですか？
justify-content はメイン軸（flex-directionで定義された方向）に沿った配置を制御します。align-items はクロス軸（メイン軸に垂直な軸）に沿った配置を制御します。行方向のFlexコンテナでは、justify-contentが水平配置、align-itemsが垂直配置を制御します。
flex-wrap はいつ使うべきですか？
デフォルトのflex-wrapはnowrapで、すべてのアイテムが1行に収まり、必要に応じて縮小されます。flex-wrap: wrapを設定すると、アイテムが収まらない場合に複数行に折り返されます。小さい幅でリフローが必要なレスポンシブカードグリッドやタグリストに便利です。
align-content は何をしますか？
align-content は複数行のFlexアイテムをクロス軸に沿ってどのように分配するかを制御します。複数行がある場合（flex-wrapがwrapまたはwrap-reverse）のみ効果があります。1行の場合は見た目に影響しません。
Flexboxのgapプロパティとは何ですか？
gap（row-gapとcolumn-gapのショートハンド）は、コンテナの外辺にマージンを追加せずにFlexアイテム間のスペースを設定します。元々はGridのみのプロパティでしたが、現在はすべてのモダンブラウザのFlexboxで完全サポートされています。