質問: flex-shrinkはどのような時に有用でしょうか? 普通にwidthでitemの幅を%で設定した方が明瞭な気がします。 例えばitemを横並びで1行にしたいときは、width:10%+80%+10%にするいう具合にです。 flex-shrinkやflex-growの場合だと、配置されるアイテムが何%になるのかいちいち計算しなければならないですよね?
回答: `width`は要素単独で決定される幅です。一方、指定された幅でレイアウトした後に余白部分をどう分け合うかを指定するのが`flex-grow`です。 たまにフォントなどの都合で指定通りの`width`にならず、縦に積み重なるように崩れてしまっているWebサイトを見かけたりしますが、Flexbox及び`flex-grow`を使用したレイアウトをしていれば意図しない折り返しを防ぐことができるかと思います。