CSSリファレンスマニュアル

CSS@ルール(RULES)

CSS属性全書

CSS3 flex-grow属性の使用方法及び例

flex-grow CSS属性は、flexアイテムがflexコンテナ内の他のアイテムに対してどのように成長するかを指定します。

以下の表は、この属性の使用方法とバージョンハイストリを示し、javascriptスクリプトでの使用方法も含まれています。

デフォルト値：	0
適用：	エラストikusアイテム
継承：	ありません
アニメーション可能：	は。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.flexGrow="1"

flex-growの使用構文

この属性の構文は以下の通りです：

flex-grow:　number　|　initial　|　inherit

以下の例では、flexを使用する方法を示しています。-grow属性。

例

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-grow:　1;　/*　Safari　6。1+　*/
　　　　flex-grow:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-grow:　3;　/*　Safari　6。1+　*/
　　　　flex-grow:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-grow:　5;　/*　Safari　6。1+　*/
　　　　flex-grow:　5;
}

テストして見て‹/›

属性値

以下の表はこの属性の値を説明しています。

値	説明
number	正の数で、エラストikusアイテムのエラストikus成長係数。デフォルト値は0です。負数は無効です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のflexを適用します。-growの属性値。

ブラウザ互換性

flex-grow属性のブラウザの互換性について、以下の表の数字はこの属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	firefox18+ ^-moz-、28+ Google Chrome 21+ ^-webkit-、29+ Internet Explorer 11+ Apple Safari 6。1+ ^-webkit- Opera 12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSS3多列レイアウト。

CSS3 flex-shrink 属性 CSS3 flex-flow 属性