📐 Flexbox ジェネレーター

CSS Flexbox プロパティをビジュアルに設定—方向・整列・折り返し・間隔。本番利用可能な CSS をライブプレビューで生成—すべてブラウザ内で完結。

子要素数

主軸方向

主軸整列

交差軸整列

折り返し

複数行整列

間隔 (px)

Flexbox ジェネレーターについて

このツールは CSS Flexbox レイアウトをビジュアルに構築します。flex-direction、justify-content、align-items、flex-wrap、align-content、gap を調整できます。プレビューが即座に更新され、生成された CSS コードはそのままスタイルシートに貼り付けられます。

使い方

子要素数を設定します。
主軸方向を選びます（row、column、またはそれぞれの逆）。
justify-content と align-items で主軸・交差軸の整列を設定します。
必要に応じて折り返し・複数行整列・間隔を変更します。
プレビュー更新をクリックし、CSS コピーでプロジェクトに利用します。

よくある質問

justify-content と align-items の違いは？ justify-content は主軸（flex-direction で決定）に沿って子要素を整列させ、align-items は交差軸に沿って整列させます。

align-content はいつ有効ですか？ flex-wrap が wrap または wrap-reverse で、複数行の子要素がある場合のみ align-content が効果を持ちます。

子要素ごとに flex-grow を設定できますか？ このツールは一括設定です。個別に制御したい場合は、各子要素に flex-grow、flex-shrink、flex-basis を手動で追加してください。