【css】 フレックスボックスでそれぞれの幅を調整してくれる flex-shrink

titleの通りなのですが、
flexboxにも幅の調整を自動的に行ってくれるプロパティーがありました。

flex-shrink

フレックスアイテムの縮小係数を設定します。 つまりそれぞれのアイテムの幅を自動で調整してくれます。

a b c d というコンテナーがあるとすると
下記のようにそれぞれに値を設定、この場合のそれぞれの幅は 4:3:2:1 となります。

.a{
  flex-shrink:1;
    background: red;
}

.b{
  flex-shrink:2;
    background:yellow;
}

.c{
  flex-shrink:3;
    background: blue;
}

.d{
  flex-shrink:4;
    background:green;
}

See the Pen flex-shrink by たまき こう (@ulqvhvox) on CodePen.

初見だったのでメモ