【flex-growとは】0？1？効かない？どう伸ばされるか検証してみた

flex関連のcssである「flex-grow」を設定した場合にどのように余白が割り振られて、伸びるのか検証してみました。

「思ったように効かない」といった方の参考になれば幸いです。

スポンサーリンク

検証：実際にflex-growを設定して幅を調べてみた

自作したツールで検証してみました。自作ツールはこちら

伸びていない状態を調べる：「flex-grow」未設定の場合

上の画像はどの子要素も「flex-grow」は未設定なので、余白は余白のままで、どの要素も伸びていません。

「flex-grow」はこの余白を割り振る量を決めるプロパティですので、まずは「余白」と「伸ばさないときの子要素」の大きさを調べます。

調べたところ、各子要素の幅は84px、余白は545pxでした。

要素	幅
親要素	881px（84px×4＋545px）
各子要素	84px
余白	545px

各子要素の「flex-grow」を1、2、3、4と設定した場合

画像のとおりですが、実際に割り振られた後の幅を表にまとめます。

子要素	flex-grow	幅
赤	1	138.5px
緑	2	193px
青	3	247.5px
黄	4	302px
合計	10	881px

どのような計算で幅が決められた？

まずは、上の画像をご覧ください。このようなイメージで余白が計算されます。何となくこのイメージを頭に入れた状態で下記を読んでいただくと分かりやすいかと思います。

では、本題です。どういった計算で各子要素84pxが138.5px、193px、247.5px、302pxとなったのかを説明します。

「flex-grow」とは？

「flex-grow」は余白をどのように分配するかの割合です。

よって今回の例の場合だと、余白を1：2：3：4で分けて各子要素に割り振ります。

では、実際に計算をしながら見ていきます。

余白を10で割る

まずは、余白を10で割ります。10で割る理由はflex-growの合計が10（1+2+3+4）だからです。

545px÷10=54.5px

この「54.5px」が比率１あたりの数値になります。

各要素に分配する余白を計算

子要素	flex-grow（比率）	分配する余白の幅
赤	1	54.5×1=54.5px
緑	2	54.5×2=109px
青	3	54.5×3=163.5px
黄	4	54.5×4=218px
合計	10	545px

基準値84pxに余白を割り振る

「flex-grow」を未設定時の「伸ばしていない本来の子要素の幅84px」に上記「分配する余白の幅」を足します。

子要素	余白を分配した後の幅
赤	84+54.5=138.5px
緑	84+109=193px
青	84+163.5=247.5px
黄	84+218=302px
合計	881px

実際の幅と計算した結果を比較

計算した幅と実際の幅がすべて一致しました。これで、「flex-grow」に設定した値は余白の割合を指定していることが分かりました。

子要素	計算結果	実際の幅
赤	84+54.5=138.5px	138.5px
緑	84+109=193px	193px
青	84+163.5=247.5px	247.5px
黄	84+218=302px	302px
合計	881px	881px

まとめ

• 「flex-grow」は余白の割合を指定している
• 計算式は下記のようになる

flex-growが設定されたときの幅の計算式

０：flex-growの初期値は「0」で、設定できる値は「0」以上

１：「余白の基準値」＝「余白」÷「flex-growの合計」
※「flex-growの合計」は関係がある子要素のflex-growの合計です。他の親に属している無関係な子要素のflex-growは足す必要はありません

２：「子要素の幅」＝「伸びる前の子要素の幅」＋（「余白の基準値」×「設定したflex-growの値」）
※flex-growを未設定の子要素はflex-grow＝0なので、「子要素の幅」＝「伸びる前の子要素の幅」、つまり幅は変わりません

他のパターンも試した結果、一致していました

上記例以外のパターンをいくつか試しました。例えば、「flex-grow」を設定していない子要素がある場合などです。

その結果はいずれも、実際の値と計算した値が一致しましたので、この計算方法であっているかと思います。

もし何かおかしい点などあればコメントでご指摘いただければと思いますm(__)m

スポンサーリンク