例
第フレックス項目が他の部分よりも幅の広い三回に成長しましょう：
/* Safari 6.1+ */
div:nth-of-type(1) {-webkit-flex-grow: 1;}
div:nth-of-type(2) {-webkit-flex-grow: 3;}
div:nth-of-type(3) {-webkit-flex-grow: 1;}
/* Standard syntax */
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;} »それを自分で試してみてください 定義と使用法
フレックス成長するプロパティは、アイテムは、同じコンテナ内の柔軟なアイテムの残りの部分に比べて大きくなりますどのくらいを指定します。
Note:要素が柔軟な項目でない場合は、フレックス成長プロパティは効果がありません。
| デフォルト値： | 0 |
|---|---|
| 継承されました： | no |
| アニメーション： | yes. Read about animatable Try it |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.flexGrow="5" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。
| プロパティ | |||||
|---|---|---|---|---|---|
| flex-grow | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
CSSの構文
flex-grow:number|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| number | アイテムは柔軟なアイテムの残りの部分に比べて大きくなりますどのくらい指定する数値。 デフォルト値は0です | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSリファレンス： flex property
CSSリファレンス： flex-basis property
CSSリファレンス： flex-direction property
CSSリファレンス： flex-flow property
CSSリファレンス： flex-shrink property
CSSリファレンス： flex-wrap property
HTML DOMリファレンス： flexGrow property