メインコンテンツまでスキップ

高度なサイズ制御

このセクションでは、Flexboxにおけるより高度なサイズ制御について詳しく解説します。 min-width、max-width、widthプロパティとFlexプロパティの相互作用について理解しましょう。

width と flex-basis の違い​

多くの開発者が混同しがちな width と flex-basis の違いを明確にしましょう。

width プロパティ​

width は要素の幅を直接指定します。Flexboxでない通常の要素と同じ動作をします。

CSS
.flex-item {
  width: 200px; /* 固定幅 */
}

flex-basis プロパティ​

flex-basis はFlexboxの計算における「理想的なサイズ」を指定します。実際のサイズは flex-grow や flex-shrink によって調整されます。

CSS
.flex-item {
  flex-basis: 200px; /* 理想的なサイズ */
  flex-grow: 1;      /* 余剰スペースがあれば拡大 */
}

比較例​

width を使用した場合

width: 100px
width: 200px
width: 100px

flex-basis + flex-grow を使用した場合

flex-basis: 100px
flex-grow: 1
flex-basis: 200px
flex-grow: 1
flex-basis: 100px
flex-grow: 1

min-width と max-width の影響​

min-width と max-width は、Flexの計算結果を制限します。

min-width の効果​

要素が min-width より小さくなることを防ぎます。

CSS
.flex-item {
  flex: 1;
  min-width: 150px; /* 最小幅を保証 */
}

min-width なし（コンテナ幅: 300px）

flex: 1
flex: 1
flex: 1

min-width: 120px あり（コンテナ幅: 300px）

flex: 1
min-width: 120px
flex: 1
min-width: 120px
flex: 1
min-width: 120px

max-width の効果​

要素が max-width より大きくなることを防ぎます。

CSS
.flex-item {
  flex: 1;
  max-width: 200px; /* 最大幅を制限 */
}

max-width なし

flex: 1
flex: 3（大きく拡大）
flex: 1

中央のアイテムに max-width: 250px

flex: 1
flex: 3
max-width: 250px
flex: 1

Flexboxの計算ロジック​

Flexboxのサイズ計算は以下の段階で行われます。

1. 初期サイズの決定​

  1. flex-basis が設定されている場合はその値
  2. flex-basis: auto の場合は width プロパティの値
  3. width も未設定の場合はコンテンツサイズ

2. 余剰・不足スペースの計算​

コンテナのサイズから全アイテムの初期サイズを引いた値

3. flex-grow / flex-shrink の適用​

  • 余剰スペースがある場合: flex-grow に応じて拡大
  • 不足している場合: flex-shrink に応じて縮小

4. min-width / max-width の制約適用​

計算結果が制約を超える場合は制約値に調整

実例で確認​

CSS
.container {
  width: 500px;
  display: flex;
}

.item1 {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 1;
}

.item2 {
  flex-basis: 200px;
  flex-grow: 2;
  flex-shrink: 1;
  max-width: 300px;
}

.item3 {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 1;      
  min-width: 120px;
}

計算過程:

  1. 初期サイズ: 100px + 200px + 100px = 400px
  2. 余剰スペース: 500px - 400px = 100px
  3. flex-grow の合計: 1 + 2 + 1 = 4
  4. 分配:
    • item1: 100px + (100px × 1/4) = 125px
    • item2: 200px + (100px × 2/4) = 250px（max-width: 300px 内）
    • item3: 100px + (100px × 1/4) = 125px（min-width: 120px 以上）
flex-basis: 100px
flex-grow: 1
→ 125px
flex-basis: 200px
flex-grow: 2
max-width: 300px
→ 250px
flex-basis: 100px
flex-grow: 1
min-width: 120px
→ 125px