CSS Flexboxジェネレーター

コンテナのプロパティ

アイテムのプロパティ

flex: 1のテクニック

flex: 1はflex: 1 1 0%のショートハンドです。アイテムは次のように振る舞います。

• 利用可能なスペースを埋めて伸びる（grow: 1）
• 必要なら縮む（shrink: 1）
• サイズ0から始まる（basis: 0%）

等幅カラムを作るには、すべてのアイテムにflex: 1を指定すれば完全に分割できます。コンテンツより小さくしたくないサイドバーにはflex: 0 0 240px（grow・shrinkなし、basis 240px）を使います。

よくあるパターン

中央寄せヒーロー

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

左ロゴ・右リンクのナビバー

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* push right */
  display: flex;
  gap: 1rem;
}

レスポンシブなカード列

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum before wrapping */
}

入力欄＋ボタンのフォーム（入力は伸縮、ボタンは固定）

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

FlexboxとGridの使い分け

• Flexbox：1次元（行または列）。アイテムサイズがコンテンツ駆動の場合や、1ラインの中でスペースを配分する場合に最適です。
• Grid：2次元（明示的なトラックを持つ行と列）。レイアウトに行構造と列構造が同時に存在する場合に最適です。

ナビバーやカードの積み重ねならFlexbox、揃った複数行のプロダクトカードグリッドならCSS Gridです。実際のページは両方を組み合わせて使うことが多く、Gridでページレイアウトを組み、コンポーネント内部はFlexboxで構成します。

よくある落とし穴

• アイテムがコンテナを埋めない：デフォルトのalign-items: stretchは、アイテムに固定heightがない場合のみ適用されます。明示的なheightがあるとそのサイズを保ちます。
• gapが効かない：ブラウザ対応を確認してください。flexのgapは遅れて実装され、Safari 14.1未満では未対応でした。2024年以降は普遍的に使えます。
• column flexの子が縮こまる：縦並びのflexはデフォルトでalign-items: stretchなので、子はコンテナ幅まで広がります。子に幅を指定するとそこから外れます。
• orderは表示のみ：スクリーンリーダーやキーボードナビゲーションはDOM順に従います。意味の通る順序を作るのにorderを使ってはいけません。あくまで視覚的な仕上げに限定します。