【CSS】flex-grow と flex-shrink の違いと使い方まとめ

Posted at 2025-03-22

はじめに

flex-grow と flex-shrinkの違いを記載しています。

余白（スペースが余っている時）に対して、どれくらい伸びるかを決定するプロパティです。

親要素の幅が 400px で、子要素がそれぞれ 100px の初期幅を持っていたとします。

.item1 { flex-grow: 1; }
.item2 { flex-grow: 1; }
.item3 { flex-grow: 2; }

このとき、3つの子要素の合計は 100px × 3 = 300px。
親要素との間に 100px の余白があります。

flex-grow: 1 + 1 + 2 = 4 が合計比率なので、

.item1 → 100px + (1/4 × 100px) = 125px

.item2 → 100px + (1/4 × 100px) = 125px

.item3 → 100px + (2/4 × 100px) = 150px

となります。

親要素が狭くなったときに、どれだけ縮むかを指定するプロパティです。

親要素の幅が 200px しかなく、子要素が初期で 100px ずつあるとき。

.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 1; }
.item3 { flex-shrink: 2; }

このとき、要素の合計は 200px、親要素も 300px なので100px負の余白が生まれます

1 + 1 + 2 = 4 の比率なので、

.item1 → 25px 縮小して 75px

.item2 → 25px 縮小して 75px

.item3 → 50px 縮小して50px

.item {
  flex-shrink: 0;
}

このようにすると、その要素は絶対に縮まなくなります。
親要素が狭いと、はみ出す原因になります。

.parent {
  display: flex;
}

.child {
  flex-grow: 1;
}

親要素が flex でなければ、grow も shrink も機能しません。