2 番目のフレックスアイテムを他よりも 3 倍広く引伸ばします:
/* 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;}
Try it Yourself ❯
flex-grow プロパティは、同じコンテナ内のフレックスアイテムを他のアイテムに比べてどれだけ引伸ばすかを指定します。
注: 要素がフレックスアイテムでない場合、flex-grow プロパティの効果はありません。
デフォルト値: | 0 |
---|---|
継承: | 継承する |
アニメーション可否: | 可。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 |
flex-grow: number|initial|inherit;
値 | 説明 | Play it |
---|---|---|
number | 数値は、他のフレックスアイテムに比べどれだけ引伸ばすかを指定します。デフォルトは 0 です | Play it ❯ |
initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
inherit | このプロパティは親要素を継承します。inherit を参照 |
CSSリファレンス:flex プロパティ
CSSリファレンス:flex-basis プロパティ
CSSリファレンス:flex-direction プロパティ
CSSリファレンス:flex-flow プロパティ
CSSリファレンス:flex-shrink プロパティ
CSSリファレンス:flex-wrap プロパティ
HTML DOM リファレンス:flexGrow プロパティ