コンテンツへスキップ
CSS Flexbox Generator
方向・配置・間隔を指定してCSS Flexboxのスタイルを生成（ジェネレーター）します。
概要
- flex-direction・justify-content・align-items・flex-wrap・gapを指定するだけで、CSS Flexboxのスタイルを生成するツールです。
- プレビューで要素の並び方をその場で確認しながら、各プロパティの値を調整できます。
- ナビゲーションバーやカードの横並びなど、Flexboxでよく使われるレイアウトの組み立てに使えます。
使い方
- 「flex-direction」「justify-content」「align-items」「flex-wrap」をプルダウンから選び、「間隔（px）」を入力します。
- 「CSSを生成する」ボタンをクリックします。
- プレビューと、display: flexを含むCSSが表示されます。
入力例・出力例
入力
row / space-between / center / wrap / 16px
出力
display: flex; flex-direction: row; justify-content: space-between; ...
利用シーン
- ナビゲーションバーやツールバーなど、要素を横並びに配置するCSSを素早く生成する
- カードやボタンを均等な間隔で並べるレイアウトを、プレビューを見ながら組み立てる
- justify-content・align-itemsの挙動の違いを、実際のプレビューで確認しながら学ぶ
よくある質問
縦並び（column）のレイアウトも生成できますか？
はい。「flex-direction」で「column」または「column-reverse」を選択してください。
要素ごとに異なるflex-grow・flex-shrinkは指定できますか？
本ツールはコンテナ（親要素）側のプロパティのみを生成します。個々の要素（子要素）のflex-grow・flex-shrink・flex-basisが必要な場合は、生成されたCSSに手動で追記してください。
IE（Internet Explorer）でも動作しますか？
生成されるプロパティ（gapを含む）は、主要なモダンブラウザ（Chrome・Firefox・Safari・Edge）で利用できます。IEは対象外です。
注意点
- 間隔（gap）は0〜500pxの範囲で指定できます。
- 生成されるのはコンテナ側のプロパティのみです。子要素ごとの調整が必要な場合は、生成後のCSSを手動で編集してください。
関連ツール
列数・行数・間隔を指定してCSS Gridのスタイルを生成（ジェネレーター）します。
色と位置を指定してlinear-gradient・radial-gradientのCSSを生成（ジェネレーター）します。
画像から複数サイズのfavicon PNGとmanifest・HTMLタグを生成（ジェネレーター）します。