flex-shrinkはどのような時に有用でしょうか?
普通にwidthでitemの幅を%で設定した方が明瞭な気がします。
例えばitemを横並びで1行にしたいときは、width:10%+80%+10%にするいう具合にです。
flex-shrinkやflex-growの場合だと、配置されるアイテムが何%になるのかいちいち計算しなければならないですよね?
全てのカラムの幅を%指定できるならそれでもいいでしょう。ですが「サイドバーは300pxで、残りを本文に割り当てたい」といったケースでは%指定することができませんよね。こういったときに flex-grow
が活躍します。
(まあこれぐらいなら width: calc(100% - 300px) という手もありますが...)
反対に flex-shrink
は、カラムの合計幅にたいしてflexコンテナの幅が足りない場合に、どのカラムを縮小するかを指定できます。
より柔軟な指定が可能なテーブルレイアウト、といったところでしょうか。
width
は要素単独で決定される幅です。一方、指定された幅でレイアウトした後に余白部分をどう分け合うかを指定するのがflex-grow
です。
たまにフォントなどの都合で指定通りのwidth
にならず、縦に積み重なるように崩れてしまっているWebサイトを見かけたりしますが、Flexbox及びflex-grow
を使用したレイアウトをしていれば意図しない折り返しを防ぐことができるかと思います。