Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

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

関連情報

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

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