CSS Flexbox/Gridジェネレーター
FlexboxとGridを切り替えながら、方向・折り返し・揃え方・間隔・列数を選ぶと、プレビューの配置と生成されるCSSがリアルタイムに更新されます。アイテム数を変えて、折り返しや余白の挙動も確認できます。生成したCSSはコピーボタンでそのまま貼り付けられます。装飾には CSS box-shadowジェネレーター や CSSグラデーションジェネレーター もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
0にすると行数を指定せず、アイテム数に応じて自動で増えます。
プレビュー
注意事項
- プレビューのアイテムは、揃え方の違いが分かるように大きさをあえて不揃いにしています。実際の要素の大きさによって見え方は変わります。
- align-content は、flex-wrap が wrap / wrap-reverse で複数行になる場合にのみ効果があるため、nowrap のときは出力されません。
- Gridの列・行は repeat(n, 1fr) による等幅の指定です。列幅を細かく変えたい場合は、生成されたCSSの grid-template-columns を直接書き換えてください。
- セレクタは .container 固定です。ご利用のクラス名に置き換えてお使いください。
用語解説
Flexbox
要素を一方向（横または縦）に並べるためのレイアウト方式。親要素に`display: flex`を指定し、子要素の並び・揃え・間隔を制御する。
Grid
行と列の格子状に要素を配置するレイアウト方式。親要素に`display: grid`を指定し、`grid-template-columns`などで格子を定義する。
主軸と交差軸
Flexboxで要素が並ぶ向きを主軸、それと直交する向きを交差軸と呼ぶ。`justify-content`は主軸、`align-items`は交差軸の揃えを決める。
fr
Gridで使う「残りの空間に対する比率」の単位。`repeat(3, 1fr)`は同じ幅の3列を意味する。
gap
FlexboxやGridでアイテム同士の間隔を指定するプロパティ。外側の余白は含まず、アイテムの間にだけ適用される。
よくある質問
FlexboxとGridはどう使い分ければよいですか？
要素を横または縦の一方向に並べるならFlexbox、行と列の両方を意識した格子状の配置ならGridが向いています。ナビゲーションやボタン列はFlexbox、カード一覧やページ全体の骨組みはGridが定番です。
justify-contentとalign-itemsの違いは何ですか？
justify-contentはアイテムが並ぶ向き（主軸）の揃え、align-itemsはそれと直交する向き（交差軸）の揃えです。flex-directionをcolumnにすると、主軸と交差軸の向きが入れ替わります。
align-contentが出力されないのはなぜですか？
align-contentは折り返しで複数行になったときの行同士の揃えを決めるプロパティで、flex-wrapがnowrapの場合は効果がありません。wrapまたはwrap-reverseを選ぶと出力されます。
生成されたCSSのセレクタは変更できますか？
セレクタは.container固定です。コピー後に、ご自身のクラス名や要素名へ置き換えてお使いください。
このページをシェア