flex-growプロパティ

flex-growプロパティは、 必要に応じて、個々のflexブロックが 隣接する要素よりもどれだけ大きく なれるかを決定します。

例えば、flexコンテナ内のすべてのflexブロックが flex-grow:1の場合、それらは同じ サイズになります。もしそのうちの1つが flex-grow:2 の場合、 それは他のすべての要素よりも 2倍大きくなります。

要素の合計幅が 親要素の幅よりも小さい場合、右側に 空きスペースが残ります。必要に応じて、この空きスペースを 要素間で比例的に分割することができます。 これは、flexアイテムに設定する flex-growプロパティで行います。この プロパティの値は無次元の数値です。

適用対象： 個々のflexブロック。

このプロパティは、一括指定プロパティである flexの一部です。

構文

cssセレクター {
  flex-grow: 正の数;
}

デフォルト値：0。

例

ここに幅 100pxの2つのflexブロックがあります。要素の合計幅は 200pxで、親要素の幅は300pxです。 つまり、100pxの空きスペースが 残ります。

要素にflex-growが設定されていない場合、 この空きスペースはそのまま表示されます。 設定されている場合、要素の実際の幅は 指定された値よりも大きくなります - 要素は空きスペースを 比例的に分配し、 それを自身の幅に加えます。

例として、最初の要素のflex-growを 1、2番目の要素を3としましょう。 各要素が空きスペースを どれだけ受け取るか計算してみましょう。

まず、すべての要素の flex-growの合計単位を求めます。 最初の要素は1、 2番目の要素は3です。つまり、合計は 4です。

次に、100pxの空きスペースを 4で割ると、flex-grow1単位あたり 25pxになります。したがって、 最初の要素には1単位の flex-grow、つまり25pxが加わり、 2番目の要素には3単位、 つまり75pxが加わります。

最初の要素の幅は125pxに、 2番目の要素の幅は175pxになります：

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 3;
}

Результат:

例

親要素の幅を400px、 最初の要素の幅を200px、 2番目の要素の幅を100pxとしましょう。 空きスペースは再び 100pxになります。

各要素にflex-growを 1に設定しましょう。合計は2なので、 100pxの空きスペースを 2で割る必要があります。つまり、 「貪欲さ」の1単位あたり50pxとなります。

すべての要素が同じ値の flex-growを持つため、すべての要素に同じ値の 50pxが加わります。つまり、 最初の要素は250pxに、 2番目の要素は150pxになります：

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent  {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

例

再び親要素の幅を400px、 最初の要素の幅を200px、 2番目の要素の幅を100pxとしましょう。

最初の要素の flex-growを3、2番目の要素を 1に設定しましょう。貪欲さの合計は 4になります。すると、貪欲さ1単位は 100px / 4 = 25pxとなります。

最初の要素に75pxが加わり、 275pxになります。2番目の要素には 25pxが加わり、125pxになります：

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent  {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

関連項目