CSS Flexbox ジェネレーター

出力される CSS

ジェネレーターは .container ルールを 1 つ出力し、宣言は display: flex、flex-direction、flex-wrap、justify-content、align-items、align-content、gap の 7 つです。スタイルシートに貼り付け、.container を自分のクラス名に変更してください。初期値と同じ値も省略せずに書くので、不要な行は消してかまいません。

プルダウンの初期選択は CSS の初期値です：row、nowrap、justify-content・align-items・align-content は normal。フレックスコンテナでは normal は交差軸でアイテムと折り返した行を伸ばし、主軸では先頭から並べます（CSS Box Alignment Level 3）。そのため、この 3 行は書かなくても同じ結果になります。gap: 1rem は違います。フレックスコンテナの gap の初期値は normal（0）なので、初期状態のルールでもアイテムのあいだに 1rem の間隔が入ります。不要なら、この行を消してください。初期状態の出力は次のとおりです。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  gap: 1rem;
}

出力はコンテナのプロパティだけで、アイテム側の flex や order は含みません。

例：ヘッダーのグローバルナビを右に寄せる

コーポレートサイトのヘッダーで、「会社概要」「事業内容」「採用情報」「お問い合わせ」のリンクを右端にまとめる配置です。「配置設定」を開いて justify-content を flex-end、align-items を center にし、ギャップに 2rem と入れます。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  align-content: normal;
  gap: 2rem;
}

ルートの文字サイズが 16px なら 2rem は 32px です。幅 960px のナビに 120px のリンクが 4 つあると、リンクとギャップで 576px を使い、残りの 384px はすべて左側に回ります。各リンクの左端は 384、536、688、840px です。ロゴを左端に置き、ナビだけを右に寄せたい場合は、ロゴとナビを同じコンテナに入れて justify-content を space-between にするか、ロゴとリンクを同じコンテナに並べて最初のリンクに margin-left: auto を付けます。

例：ログインフォームを縦に並べる

メールアドレス、パスワード、ログインボタンを縦に積むフォームです。flex-direction を column、align-items を stretch、ギャップを 12px にします。

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: stretch;
  align-content: normal;
  gap: 12px;
}

column にすると主軸が縦、交差軸が横になります。align-items: stretch で入力欄とボタンがコンテナの幅いっぱいに伸びます。初期値の normal でも同じ結果ですが、stretch と書いておくと意図が読み取りやすくなります。この向きでは justify-content は縦方向の配置になるので、コンテナに高さを指定していなければ動かす余地がありません。

日本語ラベルが 1 文字ずつ折り返す

nowrap の行でスペースが足りなくなると、アイテムは縮みます。アイテムの最小幅の初期値 auto は、中身をいちばん細くしたときの幅（min-content）です。英語は単語の途中で改行しないので最小幅は最も長い単語の幅になりますが、日本語はほぼどの文字のあいだでも改行できるので、最小幅は 1 文字分しかありません。

CSS Flexbox の使い方の解説記事で、幅 300px のコンテナに「お問い合わせはこちら」（16px）と flex: none; width: 290px の要素を並べて Chrome 152 で測ると、ラベルは 16 × 200px、つまり 1 文字ずつ 10 行になりました。ラベルに flex-shrink: 0 を付けると 1 行（160 × 20px）に戻りますが、隣の要素が固定幅のままなのでコンテナのスクロール幅は 450px になり、はみ出します。ラベルを 1 行に保つなら、ラベル側に flex-shrink: 0 か white-space: nowrap を付け、隣の要素が縮めるようにします。どちらもアイテム側のプロパティなので、ジェネレーターでは出力しません。

制限

• 出力はコンテナのプロパティだけです。flex-grow・flex-shrink・flex-basis・order・align-self の入力欄はありません。
• justify-content には stretch・start・end が、align-content には space-evenly がありません。必要ならコピー後に書き換えます。
• ギャップの欄は検証しません。全角の １２px のような無効な値もそのまま出力され、ブラウザーはその宣言を捨てます。
• プレビューのアイテム数は 1〜8 です。
• row-reverse・column-reverse は見た目の順序だけを変えます。キーボードのフォーカス移動やスクリーンリーダーは HTML の順序のままです。

Flexbox と Grid の使い分け

一次元レイアウト（単一の行または列に沿ったアイテムの配置）には Flexbox を使います。行と列を同時に制御する二次元レイアウトには CSS Grid が適しています。行と列の両方を決めたいときは CSS Grid ジェネレーターを使ってください。