flex-grow,flex-shrinkについて〜flexプロパティ前編。

挙動不信なflexプロパティ。

こんにちは、「ふ」です。
CSSのflexbox、とても便利ですね！出逢えてから自分のページにおいても使いまくっています。そんな中・・

理解に苦しむプロパテーがある。

それはflexプロパティなるものです。子要素の伸び縮みを指定するもののようですが、何を基準に算出されているのかがまったくわかりませんでした。

今回はこのflexプロパティを散々いじり倒して判明したことを書きたいと思います。長〜くなりそうなので、前後編に渡ってお送りします。

初期状態。

子要素が２つあるflexboxで考えて行きましょう。

親要素を「parent」、その中に「ao」と「daidai」の２つの子要素を配置しました。
ここで

としたときに、内部的に３つのflexプロパティが適用されます。

プレビューがこちら。色などのCSSは省略しています。
この３つのflexプロパティのうち、前編ではflex-grow、flex-shrinkについて説明していきたいと思います。

flex-grow。

子要素を配置した際に余白ができた場合を考えます。

親要素に60%の余白ができました。
ここは青と橙の幅を広げて、余白を埋めたい。そのときの比率、

を設定するのが、flex-growプロパティです。



プロパティを指定してみます。

こうすると、

ということになります。結果は下の通り。

余白60%のうち、青が40%の広がりを負担し、橙が20％の広がりを負担しました。「余白を埋めるための負担の割合」が２：１ですね。

今度は１：１の場合。

余白60％を１：１、すなはち30%ずつを仲良く分け合って広がりました。これは５：５としても３：３としても結果は同じものとなります。

今度は、青にだけ１未満の値を設定をしてみます。

余白60%のうちの半分の30%を青が負担して広がりましたが、橙のgrowは「０」なので一切広がりません。
flex-growに1未満の値を指定すると、余白を「1」としたときの比率で縮んでいます。今回の場合は

となるので、余白60%のうち半分の30%を青が負担して広がることになります。これは不思議な挙動ですね。

flex-shrink。

flexboxは子要素が親要素からはみ出す場合、子要素を縮めてbox内に収めようとします。はみ出した部分を青と橙が縮むことによって親要素内に収まりたい。そのときの

の比率を決めるのが、flex-shrinkです。




親要素から100%分はみ出すように、子要素の幅を設定してみます。

もし仮に、親要素にflexboxが適用されていないと、上のようになるはずです。

でもflexboxの立場しては（←？）、はみ出した100%のぶんを縮めなくてはならない。
青と橙がどれくらいずつ負担して縮むのかを設定します。

はみ出し100%のうち、青は40%の縮みを負担したため、もとのwidthの60%になりました。 一方橙は60%の縮みを負担したため、元のwidthの40%になりました。

扨（さて）、flex-shrinkのデフォルト値は「１」です。

そうするとCSSに値を指定しない場合、

となります。プレビューをみてみましょう。

はみ出し100%を仲良く50%ずつ負担して縮みます。

青を１未満、橙を０としてみます。

はみ出し100%分を１とした時の0.5、すなはち50%のはみ出しは青が負担してちゃんと縮みました。
一方橙の負担は０なので、一切縮む気をおこしてくれません。
これはflex-growの時と同じ挙動ですね。

ややこしかったね。

flex-growにしろflex-shrinkにしろ、とてもややこしやなプロパティでした。拙い説明でしたが、ご理解いただけたでしょうか？
「ふ」なりの言葉でまとめてみます。

そしてその「値」は、普段CSSで使っているような「絶対値（pxなど)」や「相対値（%など）」ではなく、子要素同士が負担する「比率」を指定することになります。←ここがややこしくなる原因の１つでした。




flexプロパティ、現在執筆中の後半に続きます。