flex-growとflex-shrinkの違い

みなさん、こんにちは🐒
Flexboxレイアウトを活用しまくっているおさるです。
この間、友人からCSSプロパティのflex-growとflex-shrinkの違いについて質問されたので、せっかくなので記事にしてみます...笑

⚖️ それぞれの概要

flex-growは拡張の割合、flex-shrinkは縮小の割合と、それぞれ指定できるものが違います。

プロパティ	余白があるとき	子要素たちが親要素より大きすぎるとき
flex-grow	拡張の割合を決める	影響しない
flex-shrink	影響しない	縮小の割合を決める

✅ 実際の使い分け

使用シーン	定義するプロパティ
余白を等分したい	flex-growを定義（例: 1）
余白は分けたくないが、はみ出たら縮めたい	flex-shrinkを定義（例: 1）
固定サイズで動かしたくない	両方0にする （flex: 0 0 auto;のように一括指定可能！）

👀 サンプル

説明してきたものの、文面だけではよくわからないと思うのでCodePenでサンプルをご用意しました！

flex-growの例

親要素（.grow-container）ではwidth: 100%に、
小要素（.box）ではそれぞれ適切なflex-growを定義しています。

拡張量 = 余白量 × (各要素の grow 値 ÷ 合計 grow 値)

という計算で拡張されています。
flex-growの値が他の要素より大きければ大きいほど拡張されるということです！

flex-shrinkの例

親要素（.grow-container）ではwidth: 100%に、
小要素（.box）ではそれぞれ適切なflex-shrinkを定義しています。

縮小量 = オーバー量 × ((shrink値 × 基準幅) ÷ 合計(shrink値 × 基準幅))

という計算で縮小されています。
flex-shrinkの値が他の要素より大きければ大きいほど縮小されるということです！

📚 まとめ

• flex-growは余白がある時にどれだけ拡張するか
• flex-shrinkはスペース不足の時にどれだけ縮むか

Flexboxの力を最大限引き出すには、この2つの性質をうまく使い分けるのがカギ！💡

今回紹介した flex-grow と flex-shrink の関係性や計算ルールを理解しておけば、意図したレイアウトを安定して作ることができます！
それでは、より快適なFlexライフを〜🐒✨