flex-grow

CSS の flex-grow プロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。

使用するにあたって、 flex-grow は他のフレックスプロパティである flex-shrink や flex-basis とともに使用され、通常はすべての値が設定されることを保証するために一括指定の flex を使用して定義します。

構文

/* <number> 値 */
flex-grow: 3;
flex-grow: 0.6;

/* グローバル値 */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

flex-grow プロパティは単一の <number> として指定します。

値

<number>: <number> をご覧ください。負の値は無効です。既定値は0です。

形式文法

<number>

例

HTML

<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

CSS

#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0,0,0,.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0,0,0,.2);
}

結果

仕様書

仕様書	状態	備考
CSS Flexible Box Layout Module flex-grow の定義	勧告候補	初回定義

初期値	`0`
適用対象	フロー内の疑似要素を含むフレックスアイテム
継承	なし
計算値	指定値
アニメーションの種類	number

ブラウザーの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`flex-grow`	Chrome 完全対応 29 完全対応 29 完全対応 22 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Edge 完全対応 12 完全対応 12 完全対応 12 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Firefox 完全対応 20 補足完全対応 20 補足補足 Since Firefox 28, multi-line flexbox is supported. 未対応 18 — 20 無効無効 From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE 完全対応 11 完全対応 11 完全対応 10 代替名代替名非標準の名前 `-ms-flex-positive` を使用しています。	Opera 完全対応 12.1 完全対応 12.1 完全対応 15 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Safari 完全対応 9 完全対応 9 完全対応 6.1 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	WebView Android 完全対応 4.4 完全対応 4.4 完全対応 ≤37 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Chrome Android 完全対応 29 完全対応 29 完全対応 25 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Firefox Android 完全対応 20 補足完全対応 20 補足補足 Since Firefox 28, multi-line flexbox is supported. 未対応 18 — 20 無効無効 From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android 完全対応 12.1 完全対応 12.1 完全対応 14 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Safari iOS 完全対応 9 完全対応 9 完全対応 7 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Samsung Internet Android 完全対応 2.0 完全対応 2.0 完全対応 1.5 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要
<0 animate 非標準	Chrome 完全対応 49	Edge 完全対応 79	Firefox 完全対応 32 補足完全対応 32 補足補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	IE 未対応なし	Opera 完全対応 36	Safari 未対応なし	WebView Android 完全対応 49	Chrome Android 完全対応 49	Firefox Android 完全対応 32 補足完全対応 32 補足補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	Opera Android 完全対応 36	Safari iOS 未対応なし	Samsung Internet Android 完全対応 5.0

凡例

完全対応: 完全対応
未対応: 未対応
非標準。ブラウザー間の互換性が低い可能性があります。: 非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。: 実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。: ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。: 非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。: 使用するには、ベンダー接頭辞または異なる名前が必要です。

構文

値

形式文法

例

HTML

CSS

結果

仕様書

ブラウザーの対応

凡例

関連情報

ウェブ開発のベストプラクティスを学ぶ