CSS Flexboxジェネレーター

flex-direction、wrap、justify-content、align-items、gapと、アイテムごとのflex、order、align-selfを視覚的に設定します。子要素のライブプレビューとコピー可能なCSS付きです。

コンテナ

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content はアイテムが複数行に折り返すときだけ効果があります。

アイテム数

アイテム 1

ここでアイテムを選ぶか、プレビュー内でクリックしてください。

flex-grow

flex-shrink

order

flex-basis

align-self

プレビュー

プレビューの右下隅をドラッグするとコンテナのサイズを変えられます。

CSS コード

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

CSS Flexboxジェネレーターとは？

インタラクティブなflexboxのプレイグラウンドです。コンテナのプロパティを設定し、最大12個の子アイテムを追加して、アイテムごとにflex-grow、flex-shrink、flex-basis、order、align-selfを調整できます。プレビューには、生成されたCSSがそのまま適用されます。

CSS Flexboxジェネレーターの使い方

コンテナを設定します。flex-direction、flex-wrap、justify-content、align-items、align-content、gapです。
プレビューに表示するアイテム数を選びます。
アイテムを選び（ボタン、またはプレビュー内でクリック）、flex-grow、flex-shrink、flex-basis、order、align-selfを設定します。
プレビューの角をドラッグしてサイズを変え、レイアウトの反応を確認します。
.container と .item-n ルールのCSSコードをコピーします。

例

入力

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

出力

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

CSS Flexboxジェネレーターを使うべき場面

flexboxは、ナビゲーションバー、ツールバー、ボタングループ、メディアオブジェクト、中央揃えといった一次元のレイアウトに使います。行と列を同時に扱う二次元のページレイアウトには、通常CSS Grid Generatorのほうが適しています。

CSS Flexboxジェネレーターの仕組み

コンテナには常に display: flex に加えて、direction、wrap、justify-content、align-itemsが付きます。align-content はアイテムが折り返せる場合にのみ（1行では効果がないため）、gap は0より大きい場合にのみ書かれます。アイテムでは、既定値と異なる値だけが書かれます。0 1 auto でない場合の flex: grow shrink basis、0でない場合の order、autoでない場合の align-self が、.item-1、.item-2… という名前のルールとして出力されます。無効なflex-basisは指摘され、無視されます。