flex-grow

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

使用するにあたって、 flex-grow は他の flex-shrink や flex-basis とともに使用され、通常はすべての値が設定されていることを確認するために一括指定の flex を使用して定義します。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

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

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

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

値

<number>

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

形式文法

<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>

#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);
}

結果

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• CSS フレックスボックスガイド: フレックスボックスの基本概念
• CSS フレックスボックスガイド: フレックスアイテムの主軸方向における比率の制御
• `flex-grow` is weird. Or is it? Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している