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のままになります。

以上いじょう