CSS flex-grow 属性

定義と使用法

flex-grow属性は、同じコンテナ内で、項目が他のエラストイック項目に対する増加量を定義します。

注釈：要素がエラストイック項目でない場合、flex属性は無効です。

参照：

CSSチュートリアル： CSSエラストイックフレックス

CSSリファレンスマニュアル：flex属性

CSSリファレンスマニュアル：flex-basis属性

CSSリファレンスマニュアル：flex-direction属性

CSSリファレンスマニュアル：flex-flow属性

CSSリファレンスマニュアル：flex-shrink属性

CSSリファレンスマニュアル：flex-wrap属性

HTML DOMリファレンスマニュアル：flexGrow属性

例

第2のエラストイック項目の幅を他のエラストイック項目の3倍にします：

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

自分で試してみる

CSS文法

flex-grow: number|initial|inherit;

属性値

値 説明
number 数値値、この項目が他のエラストイック項目に対する増加量を定義します。デフォルトは0です。
initial この属性をデフォルト値に設定します。参照： initial。
inherit この属性は親要素から継承されます。参照： inherit。

技術的詳細

デフォルト値： 0
継承： いいえ
アニメーション制作： サポート。参照：アニメーション関連属性。
バージョン： CSS3
JavaScript语法： object.style.flexGrow="5"

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザバージョンが示されています。

最初のバージョンは、-webkit-、-ms-、または-moz-の数字に従って指定されます。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0