カテゴリ

CSS Flexbox Generator

親要素と子要素ごとのプロパティを指定し、プレビューを見ながらCSS Flexboxのスタイルを生成（ジェネレーター）します。

コンテナ（親要素）の設定flex-directionjustify-contentalign-itemsflex-wrap間隔（px）

プレビューの子要素をクリックすると、その子要素を個別に設定できます。

子要素1の設定flex-growflex-shrinkflex-basis (px)orderalign-self

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

概要

flex-direction・justify-content・align-items・flex-wrap・gapを指定するだけで、CSS Flexboxのスタイルを生成するツールです。
子要素（アイテム）を1〜12個まで追加でき、子要素ごとにflex-grow・flex-shrink・flex-basis・order・align-selfを設定できます。
値を変更するとプレビューと生成されるCSSがすぐに更新されるため、要素の並び方を確認しながら調整できます。
ナビゲーションバーやカードの横並びなど、Flexboxでよく使われるレイアウトの組み立てに使えます。

「コンテナ（親要素）の設定」で「flex-direction」「justify-content」「align-items」「flex-wrap」をプルダウンから選び、「間隔（px）」を入力します。
必要に応じて「子要素を追加」「選択中の子要素を削除」で子要素の数を変えます。
プレビューの子要素をクリックして選択し、「子要素の設定」でflex-growなどを入力します。
プレビューとCSSは入力のたびに更新されます。生成結果をコピーして使います。

入力

row / space-between / center / wrap / 16px、子要素2のflex-grow: 1

出力

.container { display: flex; flex-direction: row; ... } .item-2 { flex-grow: 1; }

縦並び（column）のレイアウトも生成できますか？

はい。「flex-direction」で「column」または「column-reverse」を選択してください。

要素ごとに異なるflex-grow・flex-shrinkは指定できますか？

はい。プレビューの子要素をクリックして選択すると、その子要素のflex-grow・flex-shrink・flex-basis・order・align-selfを設定できます。生成されるCSSでは、.item-1・.item-2のように何番目の子要素かを示すクラス名で出力されます。

IE（Internet Explorer）でも動作しますか？

生成されるプロパティ（gapを含む）は、主要なモダンブラウザ（Chrome・Firefox・Safari・Edge）で利用できます。IEは対象外です。

間隔（gap）は0〜500px、flex-grow・flex-shrinkは0〜99、flex-basisは0〜2000px（空欄でauto）、orderは-99〜99の範囲で指定できます。
子要素のCSSは、初期値から変更したプロパティだけが出力されます。初期値のままの子要素は出力されません。
クラス名（.container・.item-1など）は例です。実際のHTMLに合わせて書き換えてください。