flex-shrinkでフレックスアイテムの幅の縮み率を指定【CSS】

flex-shrinkプロパティは、すべてのフレックスアイテムの幅の合計がフレックスコンテナの幅よりも大きい場合の、フレックスアイテムの縮み率を指定します。

{flex-shrink: 縮み率;}

flex-wrapプロパティの値がnowrapのときに意味があり、flex-basisプロパティの値が0のときには意味を持ちません。

flex-shrinkの値の指定方法

flex-shrinkプロパティでは、フレックスアイテムの縮み率を他のアイテムとの相対値（整数）で指定します。

下の例では、フレックスコンテナの幅200pxに対して、フレックスアイテムの幅はflex-basisプロパティで100pxを指定しています。

flex-shrinkプロパティで0を指定した場合。幅は縮まないので、当然フレックスアイテムの幅（100×3=300px）がフレックスコンテナの幅（200px）に収まりません。

flex-shrinkプロパティで1を指定した場合。フレックスアイテムの幅がフレックスコンテナの幅に収まるように縮まります。