More than 3 years have passed since last update.

flex grow, shrink, basis

Last updated at 2021-11-27Posted at 2021-11-27

flex-grow

子要素全ての幅を足すと親要素を越える時、その越えた分を各子要素間でどの程度負担する = 縮むかを表す
デフォルト1。子要素全てが1なので、超えた分を子要素間で均等に負担する。
例えば子1はwidth 80%,子2はwidth80%の時、Flex無しだと合計160%になり60%はみ出してしまうが、親要素にFlexを適用した途端、はみ出した60%を子要素がそれぞれ30%負担し、widthは80%-30%で50%になる
固定widthが設定されていない要素を含む親要素に対してFlexを設定すると想定外に縮むことがありハマることがある。Flexの子要素全てのwidthは固定されていることを確認するべき！！！
<div>{ comment }</div> みたいな子要素があると、子要素が伸びて親要素を超えた分を子要素間で均等に負担し縮んでしまう。縮んでほしくないときも縮んでしまうことがある。
flex-shrink: 0は超えても負担しない = 「縮まない」ということ。他の縮むことができる子要素間で超えた分を負担して縮む。もし全部の子要素がflex-shrink0だとどれも縮まず超えた分は超えたままになる。
子要素間のflex-shrinkの合計が1以上の場合は、それらの比率によって負担割合が決まる。
子要素間のflex-shrinkの合計が1以下の場合は、超えた分を1とした時の割合分縮む。

これまで、「本来の子要素の幅」を基準に考えてきたが、それをflexのプロパティとして設定できこれを基準にflexの計算がされる。本来のwidthを上書くイメージ。ただflexのdirectionが縦になるとwidthではなくなることがwidthとは違う。
デフォルトはauto。本来の子要素の幅がそのままflexの計算をする基準値になる
子1と2にflex-basis: 40%を設定すると、合わせて80%のため残り20%は余白になる
子1にwidthを80%, 子2にwidth 200%と設定後、それぞれflex-basis: 50%とすると結果のwidthは50%になり上書きされるイメージ
pxの絶対値でも設定可能。