備忘録的プログラミングリファレンス

flex-shrinkプロパティ

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

フレックスアイテムの幅を縮小比2で指定(Exampleを参照
.parent {
	display: flex;
}

.flex_item{
	flex-shrink: 2;
}

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

 似たプロパティに、flex-basisflex-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 AnimationYes

Example

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

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

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