Flexboxに挑戦 3 (grow／shrink／basisとは)

フレックスボックスの、子アイテムのスタイルでは、ショートハンドとして、このような書き方が推奨されているとか。

flex:＜因数1＞ ＜因数2＞ ＜因数3＞;

これは何を意味しているかというと

因数1 ⇒ flex-grow:＜数値＞;
因数2 ⇒ flex-shrink:＜数値＞;
因数3 ⇒ flex-basis:＜数値＞;

の指定と同じ意味だそうです。

そして、この３つは常に同時に指定してやるべきなので、ショートハンドで一緒に記述しろということのようですね。

で、この三種類のスタイルは何を指定しているかと言うと

flex-grow ⇒ 子アイテムと親アイテムの間に余白がある場合に子アイテムの余白が広がる割合※

flex-shrink ⇒ 子アイテムが親要素より大きい時に、子アイテムの幅から減らされる「マイナスの余白分」の配分比率

flex-basis ⇒ 子アイテムの基本的な幅を設定する

※ポイントは、あくまで「余白」の分配比率であって、アイテムの幅の分配比率ではないということ。

growとshrinkの値は、例えば子アイテムにすべて同じ数値が（通常は１ですが）設定されていれば、余白をアイテムの数で割った数値が均等に各アイテムから減らされていくというわけですね。(０を指定すると拡大縮小されない）

では basis はなんだ？？？と思ったら、「width」のflex版、という感じみたいですね。

widthだと絶対値（固定値）になってしまいますが、flex-basisだと、インテリジェントに幅を調整してくれる、ということのようです。

---

実験１(grow)

まず、幅400pxの領域を作ってみる。（赤色）

次に、それをflexにして、中に 20px, 40px, 60px, 80px の子アイテムを作る。
（flex-grow:0;）

子アイテムの合計幅は200px、残った領域も200pxとなる。

次に、この子アイテムの、flex-grow をすべて「1」にしてみる。

すべてのflex-growが1なので、余白の200pxを均等に分け合うように配分される。

今度は、flex-grow をアイテム別に上から 1, 2, 3, 4 にする。

余白の200pxを「１：２：３：４」の比率で分配するように拡張される。

まとめて並べてみると・・・

---

実験２(shrink)

今度は、親領域を子領域の合計より狭くなるように設定してみます

その中に「flex-shrink:0;」で 50px, 100px, 150px, 200px の子アイテムを作る。

flex-shrinkが0なので子アイテムは縮小されず、親要素の幅を無視して子アイテムが指定幅で配置される。

今度はすべての子要素を「flex-shrink:1;」にすると

親要素と子要素の幅の差（マイナスの余白）60pxが均等に引かれる。

次に、子要素の shrink を「1:2:3:4」にすると

子要素の shrink を「4:3:2:1」にすると

まとめて並べてみる

---

以下は、幅を「width」で「10％:20％:30％:40％」の比率に指定して作った事例ですが

じつはこれ、margin がゼロでないため、幅を単純に「10％:20％:30％:40％」で指定すると子要素が親要素の幅を超えてはみ出してしまうため、margin の分を計算して差し引いて「9.2%, 18.4%, 27.6%, 36.8%」に指定してあります。

これを、widthではなくflex-basisで指定してやると、マージンの分を計算しなくてもはみ出さないように自動で調整してくれるというわけですね。

※これは、アイテムのスタイルを下記のように設定しています

.item1{flex:0 0 10%;} .item2{flex:0 0 20%;} .item3{flex:0 0 30%;} .item4{flex:1 1 40%;}

ポイントは、子アイテムの４番め以外はgrow・shrinkが「0」になっていること。

grow・shrinkが「0」になっていれば、そこはwidthで指定(固定値)したのと同じ意味になりますので、最終的に4番目の幅だけが調整されることになります。

複数のアイテムのgrow・shrinkをゼロ以外にした場合、どのように拡大縮小されるのかは、よく分かりませんが、子アイテム内の大きさ（量）によって比率が決めらるという感じですかね？

.item1{flex:1 1 auto;} .item2{flex:1 1 auto;} .item3{flex:1 1 auto;} .item4{flex:1 1 auto;}

。