2021年3月28日cssflex関連のcssである「flex-shrink」を設定した場合にどのように縮小されるのか検証してみました。「思ったように効かない」「使い方は?」といった方の参考になれば幸いです。スポンサーリンク検証:実際にflex-shrinkを設定して幅を調べてみた自作したツールで検証してみました。Chrome(自サイト)「flex-shrink」は未設定でも、デフォルトで「1」が設定されています。設定可能な値は「1」以上です。例として上の画像で考えると、上のレイアウトの場合は、親要素に十分な幅があるため、子要素は縮小される必要がありませんので、「flex-shrink」は何の効果もありません。下のレイアウトの場合は、親要素に十分な幅がないため、各子要素を縮小して表示する必要があります。そこで縮小する割合を「flex-shrink」の値を元に決めるのです。子要素に縮小が不要な状態から下のレイアウトにするには、「縮小する必要がある幅」があります。この例の場合だと、「flex-shrink」が未設定なので、デフォルトの「1」が各要素に設定されています。「縮小する必要がある幅」を1:1:1:1で割って、各子要素をその分縮小します。詳しくは後ほど説明します。実際の値を表にまとめます調べたところ、「縮小されていない各子要素(上のレイアウト)の幅」は276px、「縮小された各子要素(下のレイアウト)の幅」は220.25px、「縮小する必要がある幅」は223pxでした。「縮小されていない各子要素(上のレイアウト)の幅」から「縮小する必要がある幅」分を引いて「縮小された各子要素の幅」にするということです。Chrome(自サイト)まずは、上の画像をご覧ください。このようなイメージで縮小する必要がある幅が計算されます。何となくこのイメージを頭に入れた状態で下記を読んでいただくと分かりやすいかと思います。いった計算で各子要素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」が比率1あたりの数値になります。55.75px×4=223px基準値276pxを縮小する「縮小されていない各子要素の幅276px」から上記「縮小する幅」を引きます。計算した幅と実際の幅がすべて一致しました。Chrome(自サイト)最初の例は少しシンプル過ぎるので各子要素の「flex-shrink」を1、2、3、4と設定した場合も簡単に例に挙げておきます。※最初の例1:1:1:1でご納得された方はこちらの別例は見る必要はありません実際の値を表にまとめます調べたところ、「縮小されていない各子要素(上のレイアウト)の幅」は276px、「縮小する必要がある幅」は223pxでした。※上のレイアウト276px縮小する必要がある幅223px縮小された各子要素(下のレイアウト)の幅は上の画像のとおりです。Chrome(自サイト)まずは、上の画像をご覧ください。このようなイメージで縮小する必要がある幅が計算されます。何となくこのイメージを頭に入れた状態で下記を読んでいただくと分かりやすいかと思います。いった計算で各子要素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」が比率1あたりの数値になります。223px基準値276pxを縮小する「縮小されていない各子要素の幅276px」から上記「縮小する幅」を引きます。計算した幅と実際の幅がすべて一致しました。※「flex-shrinkの合計」は関係がある子要素のflex-shrinkの合計です。他の親に属している無関係な子要素のflex-shrinkは足す必要はありません2:「子要素の幅」=「縮小される前の子要素の幅」+(「縮小する必要がある幅の基準値」×「設定したflex-shrinkの値」)他のパターンも試した結果、一致していました上記例以外のパターンをいくつか試しました。その結果はいずれも、実際の値と計算した値が一致しましたので、この計算方法であっているかと思います。