flex-grow flex-shrinkとは？ざっくり解説(CSS)
アプリ開発の勉強をしてる時にflex-growとflex-shrinkという見たことないCSSプロパティを見かけたので紹介します。
flex-grow
flex-growを指定すると、flexで指定した子要素を配置して余白ができてしまった時に、その余白を要素を拡大することで埋めることができます。
flex-growの値は拡大する時の拡大率を表します。
例えば、[width: 20%]と指定した要素を二つ並べた時、普通に左詰めで配置すると右側に60%分の余白ができてしまいます。
ここで、二つの要素に[flex-grow: 1]という要素を追加してみます。すると、二つの要素は余白を1:1の割合で分け合い、二つの要素のwidthは合計50%となります。(初期値20% + 余白分30%)
また、一つ目の要素に[flex-grow: 1]を指定し、二つ目の要素に[flex-grow: 2]を指定するとそれぞれの要素は余白を1:2の割合で分け合い、結果的に一つ目の要素のwidthは40%、二つ目の要素のwidthは60%になります。
このように、余白を分け合う割合を指定して、余白を埋める役割をするのがflex-growです。
flex-shrink
flex-shrinkを指定すると、flexで指定した子要素がはみ出してしまった時に要素を縮小して画面内に収まることができます。
flex-shrinkの値は縮小する時の縮小率を表します。
例えば、[width: 100%]と指定した要素を二つ横に並べます。この時widthの合計は200%となるので、100%分はみ出します。
ここで、それぞれの要素に[flex-shrink: 1]を指定します。すると、はみ出した分の100%を２つの要素がそれぞれ50%ずつ縮むことで画面内に収まります。
ちなみに、親要素に[display: flex]と指定したときにデフォルトで[flex-shrink: 1]が子要素に指定されるため、flexを使うときにはflex-shrinkを変更しない限り幅が100%を超えることはありません。
このようにflex-growの反対のような役割をするのがflex-shrinkです。
参考
