flex-grow､flex-shrinkを理解する【CSSを書いていこう】

flex-growとflex-shrinkの使い方について見ていきます。

flex-grow

前回はflex-basisでサイズを決める方法についてみてきました。

詳しくは『flex-basisでサイズを決めよう【CSSを書いていこう】』を御覧ください。

あわせて読みたい

flex-basisでサイズを決めよう【CSSを書いていこう】 要素のサイズを決めるためのプロパティである、flex-basisについて。 flex-basis flex-basis（フレックスベーシス） 前回まででフレックスアイテムに対して使用できるプ...

今回は前回見たflex-basis（フレックスベーシス）と合わせて使うプロパティについて見ていきます。

flex-grow（フレックスグロウ）は主軸方向に余白があるときに、それぞれの要素をどれだけ伸ばすかを指定するプロパティです。

初期値はですが 0 になっていて、余白があっても伸ばさないという意味になります。

余白の割合を設定していき、値を１にすると指定されたボックスに１００％分の余白を追加でき余白はなくなります。

一つのコンテイナーに複数ある場合は、それぞれ割り振られた値分分けて振り与えられます。

例えばcontainerの余白が１００px あってflex-itemにそれぞれflex-grow: 1;を指定すると100pxを３つのボックスで余白を均等に割り振り33pxがboxの要素になります。

このとき余白はなくなるので余白をすべて使い切りたいときなどによく使われるプロパティです。

flex-shrink

flex-shrink（フレックスシュリンク）は逆にコンテナの幅が足りなかったときにどの要素をどれだけ縮めるかを指定することができます。

初期値は１なので、足りない分はそれぞれのボックスを均等に削ります。値を０にするとコンテンツを縮めてもボックスは小さくなりません。

例えばcontainerが700pxあり200pxの要素が４つあった場合100px足りなくなってしまいます。初期値はflex-shrink: 1なのでこの場合せんぶ均等に25pxずつ要素からスペースを持っていかれてしまいます。

そこで後半２つのボックスにflex-shrink: 0;と指定すると前半２つの要素から50pxずつスペースを削り150pxになり、後半２つは200pxのままになります。

以上