概要

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。

初期値0
適用対象flex items, including in-flow pseudo-elements
継承不可
メディアvisual
計算値指定値
Animation typenumber
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については 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 の定義
勧告候補 最初の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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 で終わるアニメーションを実行できませんでした (仕様デモ)。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Sebastianz, yyss, fscholz, teoli, ethertank
最終更新者: Sebastianz,