CSS Flexboxジェネレーター

CSS Flexboxレイアウトをライブプレビューで視覚的に生成します。

1
2
3
4

コンテナプロパティ

#f0f0f0

プレビューのアイテムをクリックすると個別のflexプロパティを編集できます。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}
すべてのレイアウト生成はブラウザで行われます。

使い方

  1. 1

    コンテナプロパティを設定

    flex-direction、flex-wrap、justify-content、align-items、gapを選択してレイアウトを制御します。

  2. 2

    アイテム数を調整

    表示するflexアイテムの数(1-12)を設定し、コンテナの高さと背景色をカスタマイズします。

  3. 3

    個別アイテムを編集

    プレビューのアイテムをクリックしてflex-grow、flex-shrink等のプロパティを設定します。

  4. 4

    CSSをコピー

    生成されたCSSはリアルタイムで更新されます。コピーボタンでクリップボードにコピーします。

よくある質問

CSS Flexboxとは？
CSS Flexboxはコンテナ内のアイテム間でスペースを配分するための1次元レイアウトモデルです。
FlexboxとGridの使い分けは？
1次元レイアウトにはFlexboxを、2次元レイアウトにはCSS Gridを使用します。
flex-growとは？
flex-growは余分なスペースがある場合にアイテムがどれだけ拡大するかを制御します。
データは安全ですか？
はい。すべてのレイアウト生成はブラウザ内で完全に処理されます。