CSS Flexbox ジェネレーター
この CSS Flexbox 作成ツールでは、コンテナに flex-direction、justify-content、align-items、flex-wrap、align-content、gap を設定し、最大 20 個のアイテムをライブでプレビューして、生成された CSS をコピーできます。
px
このツールについて
この CSS Flexbox 作成ツールでは、コンテナに flex-direction、justify-content、align-items、flex-wrap、align-content、gap を設定し、最大 20 個のアイテムをライブでプレビューして、生成された CSS をコピーできます。
使い方
- 方向と折り返しを選びます。
- justify-content と align-items（折り返した行には align-content も）を設定します。
- gap とプレビューのアイテム数を設定します。
- 「CSS をコピー」をクリックし、コンテナのルールを使います。
知っておきたいこと
- justify-content は主軸に沿ってアイテムを配置し、align-items は交差軸に沿って配置します。
- flex-direction: column にすると軸が入れ替わり、justify-content が縦方向に働きます。
- align-content は、アイテムが複数行に折り返したときにだけ効果があります。
- gap プロパティは、現在の主要ブラウザすべてで Flexbox に対応しています。
- Flexbox は 1 次元のレイアウトです。行と列を同時に扱うには CSS Grid を使います。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
Flexbox で div を中央に配置するには？
親要素に display: flex; justify-content: center; align-items: center; を設定すると、子要素が水平・垂直の両方で中央に配置されます。
justify-content と align-items の違いは何ですか？
justify-content は主軸（初期値は行）に沿ってアイテムを配分し、align-items は交差軸に沿ってアイテムを配置します。
Grid ではなく Flexbox を使うのはどんなときですか？
ナビゲーションバーやボタンの列など 1 次元のレイアウトには Flexbox を、2 次元のページレイアウトには Grid を使います。
align-content が効かないのはなぜですか？
align-content は、flex-wrap によってアイテムが複数行に折り返す場合にのみ適用されます。