flex-growプロパティ

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

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

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

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

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

構文

セレクター {
	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になります：

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

.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になります：

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

.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になります：

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

.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;
}

flex-growプロパティ

構文

例

例

例

関連項目