0

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

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

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

0

2 件の回答 2

2

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

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

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

1
  • なるほど、ありがとうございます!いろいろ試してみます!
    – aqua
    Commented 2017年4月29日 13:58
1

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。