Flexboxジェネレーター

direction・wrap・justify-content・align系・gap・個数を設定し、ライブプレビューを見ながらコンテナのCSSをコピーします。

すべてこのブラウザ内で実行します。

プレビュー

1
2
3
4
5

CSS

display: flex;
flex-wrap: wrap;
gap: 8px;

使い方

  1. コンテナのプロパティを選びます。
  2. プレビューのボックス配置を確認します。
  3. 生成されたCSSをコピーします。

対応範囲

コンテナレベルのflexboxのみで、アイテム個別のflex/orderは扱いません。1〜12個、gap 0〜200px。プレビューは出力と同じCSSを使います。

関連する道具

関連ガイド