34385


flex-shrinkはどのような時に有用でしょうか？  
普通にwidthでitemの幅を%で設定した方が明瞭な気がします。

例えばitemを横並びで1行にしたいときは、width:10%＋80%+10%にするいう具合にです。

flex-shrinkやflex-growの場合だと、配置されるアイテムが何%になるのかいちいち計算しなければならないですよね？


CC BY-SA 3.0
2017-04-29T04:53:06.877
34371
2017-04-29T23:27:30.607
12297
question
html css
Flexboxで、flexプロパティとwidthでの%指定の違いは？


全てのカラムの幅を%指定できるならそれでもいいでしょう。ですが「サイドバーは300pxで、残りを本文に割り当てたい」といったケースでは%指定することができませんよね。こういったときに
`flex-grow` が活躍します。  
（まあこれぐらいなら width: calc(100% - 300px) という手もありますが...）

反対に `flex-shrink` は、カラムの合計幅にたいしてflexコンテナの幅が足りない場合に、どのカラムを縮小するかを指定できます。

より柔軟な指定が可能なテーブルレイアウト、といったところでしょうか。


CC BY-SA 3.0
2017-04-29T09:45:17.817
34376
2017-04-29T09:50:24.527
2017-04-29T09:50:24.527
8000
8000
34371
answer


`width`は要素単独で決定される幅です。一方、指定された幅でレイアウトした後に余白部分をどう分け合うかを指定するのが`flex-grow`です。

たまにフォントなどの都合で指定通りの`width`にならず、縦に積み重なるように崩れてしまっているWebサイトを見かけたりしますが、Flexbox及び`flex-
grow`を使用したレイアウトをしていれば意図しない折り返しを防ぐことができるかと思います。


CC BY-SA 3.0
2017-04-29T23:27:30.607
34385
2017-04-29T23:27:30.607
4236
34371
answer