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

flex-growプロパティ

 flex-growプロパティは、フレックスコンテナの幅に余白ができる場合に、子エレメント(フレックスアイテム)の幅を指定するプロパティです。
 指定されたフレックスアイテムがフレックスコンテナの余り幅がないように拡がります。
 このプロパティは子エレメント(フレックスアイテム)に指定します。値は伸長比で指定し、他のアイテムとの相対比となります。

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

.flex_item{
	flex-grow: 2;
}

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

 似たプロパティに、flex-basisflex-shrinkがあります。
 flex-basisは内容の幅または絶対値で指定します。 flex-shrinkプロパティはフレックスアイテムが横に並びきらない場合の縮小比の指定です。

構文(Syntax)

CSS

flex-grow: number | initial | inherit ;

DOM(JavaScript)

値の取得
String = object.style.flexGrow;
値の設定
object.style.flexGrow=" number | initial | inherit ";

値(Values)

Value摘要
none初期値(default値)
number伸長比
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)0
継承(Inherited)No
CSS AnimationYes

Example

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

 フレックスコンテナの幅は余白ができるように設定してあります。

 flex-growプロパティによってフッレックスコンテナの幅に余白がないようにフレックスアイテムが拡がります。