flex関連のcssである「flex-shrink」を設定した場合にどのように縮小されるのか検証してみました。
「思ったように効かない」「使い方は？」といった方の参考になれば幸いです。
スポンサーリンク検証：実際にflex-shrinkを設定して幅を調べてみた
自作したツールで検証してみました。自作ツールはこちら
「flex-shrink」未設定の場合
「flex-shrink」は未設定でも、デフォルトで「1」が設定されています。そして、設定可能な値は「1」以上です。
例として上の画像で考えると、上のレイアウトの場合は、親要素に十分な幅があるため、子要素は縮小される必要がありませんので、「flex-shrink」は何の効果もありません。ですが、下のレイアウトの場合は、親要素に十分な幅がないため、各子要素を縮小して表示する必要があります。そこで縮小する割合を「flex-shrink」の値を元に決めるのです。
子要素に縮小が不要な状態から下のレイアウトにするには、「縮小する必要がある幅」があります。そして、この例の場合だと、「flex-shrink」が未設定なので、デフォルトの「1」が各要素に設定されています。
つまり、「縮小する必要がある幅」を１：１：１：１で割って、各子要素をその分縮小します。詳しくは後ほど説明します。
実際の値を表にまとめます
調べたところ、「縮小されていない各子要素（上のレイアウト）の幅」は276px、「縮小された各子要素（下のレイアウト）の幅」は220.25px、「縮小する必要がある幅」は223pxでした。つまり、「縮小されていない各子要素（上のレイアウト）の幅」から「縮小する必要がある幅」分を引いて「縮小された各子要素の幅」にするということです。
| 要素 | 幅 |
|---|---|
| 縮小されていない各子要素の幅 ※上のレイアウト |
276px |
| 縮小された各子要素の幅 ※下のレイアウト |
220.25px |
| 縮小する必要がある幅 | 223px |
どのような計算で幅が決められた？
まずは、上の画像をご覧ください。このようなイメージで縮小する必要がある幅が計算されます。何となくこのイメージを頭に入れた状態で下記を読んでいただくと分かりやすいかと思います。
では、本題です。どういった計算で各子要素276pxが220.25pxとなったのかを説明します。
「flex-shrink」とは？
重複しますが「flex-shrink」は縮小する必要がある幅をどのように分配するかの割合です。
よって今回の例の場合だと、余白を1：1：1：1で分けて各子要素に割り振ります。
では、実際に計算をしながら見ていきます。
縮小する必要がある幅を4で割る
まずは、縮小する必要がある幅を4で割ります。4で割る理由はflex-shrinkの合計が4（1+1+1+1）だからです。
223px÷4=55.75px
この「55.75px」が比率１あたりの数値になります。
各要素を縮小する幅を計算
| 子要素 | flex-grow（比率） | 分配する余白の幅 |
|---|---|---|
| 赤、緑、青、黄 | 1 | 55.75×1=55.75px |
| 合計 | 4 | 55.75px×4=223px |
基準値276pxを縮小する
「縮小されていない各子要素の幅276px」から上記「縮小する幅」を引きます。
| 子要素 | 余白を分配した後の幅 |
|---|---|
| 赤、緑、青、黄 | 276－55.75=220.25px |
| 合計 | 220.25×4＝881px |
実際の幅と計算した結果を比較
計算した幅と実際の幅がすべて一致しました。これで、「flex-shrink」に設定した値は縮小する必要がある幅の割合を指定していることが分かりました。
| 子要素 | 計算結果 | 実際の幅 |
|---|---|---|
| 赤、緑、青、黄 | 276－55.75=220.25px | 220.25px |
| 合計 | 881px | 881px |
別の例：各子要素の「flex-shrink」を1、2、3、4と設定した場合
最初の例は少しシンプル過ぎるので各子要素の「flex-shrink」を1、2、3、4と設定した場合も簡単に例に挙げておきます。
※最初の例1：1：1：1でご納得された方はこちらの別例は見る必要はありません
実際の値を表にまとめます
調べたところ、「縮小されていない各子要素（上のレイアウト）の幅」は276px、「縮小する必要がある幅」は223pxでした。
| 要素 | 幅 |
|---|---|
| 縮小されていない各子要素の幅 ※上のレイアウト |
276px |
| 縮小する必要がある幅 | 223px |
縮小された各子要素（下のレイアウト）の幅は上の画像のとおりです。
| 子要素 | flex-shrink | 幅 |
|---|---|---|
| 赤 | 1 | 253.7px |
| 緑 | 2 | 231.4px |
| 青 | 3 | 209.1px |
| 黄 | 4 | 186.8px |
| 合計 | 10 | 881px |
どのような計算で幅が決められた？
まずは、上の画像をご覧ください。このようなイメージで縮小する必要がある幅が計算されます。何となくこのイメージを頭に入れた状態で下記を読んでいただくと分かりやすいかと思います。
では、本題です。どういった計算で各子要素276pxが253.7px、231.4px、209.1px、186.8pxとなったのかを説明します。
「flex-shrink」とは？
重複しますが「flex-shrink」は縮小する必要がある幅をどのように分配するかの割合です。
よって今回の例の場合だと、余白を1：2：3：4で分けて各子要素に割り振ります。
では、実際に計算をしながら見ていきます。
縮小する必要がある幅を10で割る
まずは、縮小する必要がある幅を10で割ります。10で割る理由はflex-shrinkの合計が10（1+2+3+4）だからです。
223px÷10=22.3px
この「22.3px」が比率１あたりの数値になります。
各要素を縮小する幅を計算
| 子要素 | flex-grow（比率） | 分配する余白の幅 |
|---|---|---|
| 赤 | 1 | 22.3×1=22.3px |
| 緑 | 2 | 22.3×2=44.6px |
| 青 | 3 | 22.3×3=66.9px |
| 黄 | 4 | 22.3×4=89.2px |
| 合計 | 10 | 223px |
基準値276pxを縮小する
「縮小されていない各子要素の幅276px」から上記「縮小する幅」を引きます。
| 子要素 | 余白を分配した後の幅 |
|---|---|
| 赤 | 276-22.3=253.7px |
| 緑 | 276-44.6=231.4px |
| 青 | 276-66.9=209.1px |
| 黄 | 276-89.2=186.8px |
| 合計 | 881px |
実際の幅と計算した結果を比較
計算した幅と実際の幅がすべて一致しました。これで、「flex-shrink」に設定した値は縮小する必要がある幅の割合を指定していることが分かりました。
| 子要素 | 計算結果 | 実際の幅 |
|---|---|---|
| 赤 | 276-22.3=253.7px | 253.7px |
| 緑 | 276-44.6=231.4px | 231.4px |
| 青 | 276-66.9=209.1px | 209.1px |
| 黄 | 276-89.2=186.8px | 186.8px |
| 合計 | 881px | 881px |
まとめ
- 親要素に十分な幅があり、子要素を縮小する必要がない場合は、「flex-shrink」の効果はない
- 「flex-shrink」は縮小する必要がある幅の割合を指定している
- 計算式は下記のようになる
flex-shrinkが設定されたときの幅の計算式
０：flex-shrinkの初期値は「1」で、設定できる値は「1」以上
１：「縮小する必要がある幅の基準値」＝「縮小する必要がある幅」÷「flex-shrinkの合計」
※「flex-shrinkの合計」は関係がある子要素のflex-shrinkの合計です。他の親に属している無関係な子要素のflex-shrinkは足す必要はありません
２：「子要素の幅」＝「縮小される前の子要素の幅」＋（「縮小する必要がある幅の基準値」×「設定したflex-shrinkの値」）
他のパターンも試した結果、一致していました
上記例以外のパターンをいくつか試しました。その結果はいずれも、実際の値と計算した値が一致しましたので、この計算方法であっているかと思います。
もし何かおかしい点などあればコメントでご指摘いただければと思いますm(__)m
スポンサーリンク
