flex-shrink プロパティ

　flex-shrink プロパティは、フレックスコンテナにおいて横並びの子エレメント（フレックスアイテム）が入り切らない場合に、フレックスアイテムの縮小比を指定するプロパティです。
　指定されたフレックスアイテムがフレックスコンテナ内に収まるように縮小されます。
　このプロパティは子エレメント（フレックスアイテム）に指定します。値は縮小比で指定し、他のアイテムとの相対比となります。

フレックスアイテムの幅を縮小比2で指定（Exampleを参照）

.parent {
	display: flex;
}

.flex_item{
	flex-shrink: 2;
}

　フレックスコンテナとはdisplay:flex;が設定されたエレメントです。

　似たプロパティに、flex-basis、flex-growがあります。
　flex-basis は内容の幅または絶対値で指定します。 flex-growプロパティはフレックスコンテナの幅に余りがないように拡がります。

構文(Syntax)

CSS

flex-shrink: number | initial | inherit ;

DOM ( JavaScript )

値の取得

String = object.style.flexShrink;

値の設定

object.style.flexShrink=" number | initial | inherit ";

値（Values）

Value	摘要
none	初期値（default値）
number	縮小比
initial	初期値に戻す
inherit	親エレメントのプロパティを継承

備考（Remarks）


初期値（Default value）	1
継承（Inherited）	No
CSS Animation	Yes

Example

　flex-shrinkの例です。flex-shrink プロパティはフレックスアイテム（子エレメント）に指定します。

　フレックスコンテナはフレックスアイテムが入り切らない幅に設定してあります。

　フレックスコンテナに入り切らない場合に、flex-shrinkの値からフレックスアイテムの幅が縮小されます。