概要
flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。
| 初期値 | 0 |
|---|---|
| 適用対象 | flex items, including in-flow pseudo-elements |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 可。 の値として補完しますnumber |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。
構文
flex-grow: 3; flex-grow: 0.6; /* グローバル値 */ flex-grow: inherit; flex-grow: initial; flex-grow: unset;
値
<number><number>をご覧ください。負の値は無効です。
形式構文
<number>
例
element {
flex-grow: 3;
}
仕様書
| 仕様書 | 状況 | 備考 |
|---|---|---|
| CSS Flexible Box Layout Module flex-grow の定義 |
勧告候補 | 最初の定義 |
ブラウザ実装状況
| 機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 18.0 (18.0) [1] | 21.0-webkit | 11 | 12.10 | 6.1-webkit |
| < 0 animate | 32.0 (32.0) [2] | 49 | ? | 未サポート | 未サポート |
| 機能 | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 18.0 (18.0) [1] | ? | 未サポート | 12.10 | 未サポート |
| < 0 animate | 32.0 (32.0) [2] | ? | ? | 未サポート | 未サポート |
[1] バージョン 28 まで、Firefox は単一ラインの flexbox のみサポートしていました。Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定 "layout.css.flexbox.enabled" を true に変更します。
[2] Firefox 32 より前のバージョンでは、Gecko は値 0 から始まる、または値 0 で終わるアニメーションを実行できませんでした (仕様、デモ)。