flex-grow flexアイテムの広がりを指定する
flex-growは、flexアイテムの広がりに関係するプロパティです。flex-growプロパティを指定したflexアイテムは幅が広がるということです。
親要素にdisplay: flex;
を指定すると子要素がflexアイテムとなって横並びしますが、これだけだとflexアイテムはコンテンツ分の横幅しか持ちません。flexコンテナに対して余白ができるので、flexアイテムの横幅を広げてflexコンテナにぴったり納まるようにしたいものです。それを解決するのがflex-growプロパティです。
では、flex-growプロパティはどのように指定するのか。flex-growを指定すると、flexアイテムはどのように、またどれくらい広がるのかを説明します。
幅が広がるとはどういうことか
まず、flex-growを指定しなかった場合、flexアイテムは、flexコンテナに対してどういう状況なのかを見ておきます。
次のようなHTMLとCSSのコードがあったとします。
<ul class="flex_container">
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
</ul>
.flex_container {
display: flex;
background-color: #eee;
list-style-type: none;
}
.flex_container li {
background-color: #ffb;
padding: 5px;
border: solid 1px #888;
}
flexコンテナであるul要素にdisplay: flex;
を指定して、flexアイテムのli要素を横並びにしています。
この場合それぞれのflexアイテムは、次のように、コンテンツ分と指定された余白分の幅だけを持って横並びします。尚、わかりやすくなるように、ul要素にも#eee
で背景色をつけています。
- アイテム
- アイテム
- アイテム
各 li要素はコンテンツの幅しか持たない為、ul要素に対して余白ができています。li要素の合計の横幅がul要素の幅に達していないわけです。ここでflex-growプロパティを指定すると、flex-growの値に応じて、余白分が各li要素に分配されます。結果、li要素の横幅が広がります。
ではflex-grow
を実際に指定して、表示結果を見ていきます。
flex-growプロパティの概要
flex-growプロパティを指定したflexアイテムは横幅が広がります。
flexアイテムの横幅の合計が短くて、flexコンテナの幅に対して余白ができた場合、 flex-growプロパティの値に応じた比率で、flexアイテムの幅が自動的に伸ばされて余白が埋められる、ということです。
ここで重要なのが、flex-growの値は、伸びる長さを表す絶対値を意味しているのではなく、伸長係数を意味しているという点です。つまり何px広げるかか、という意味ではなく、どれだけの割合で広げるかという意味です。
- 書式
- flex-grow: 値;
- 初期値
- 0(広がる割合を持たないことを意味する)
- 値の指定
- 正の数値
- 継承
- しない
- 指定先
- flexアイテム
初期値は「0」、つまり伸長系数が「0」なので、flex-growプロパティの指定がない場合は広がりません。
flex-growを指定する
HTMLは先ほどと同じものを使用し、次のようにli要素に flex-growプロパティを指定してみます。
.flex_container {
display: flex;
中略
}
.flex_container li {
flex-grow: 1;
中略
}
flexアイテムに flex-growプロパティを指定し、その値を「1」としました。結果、次のように表示されます。
- アイテム
- アイテム
- アイテム
全てのli要素のflex-grow
の値が「1」なので、余白が 1:1:1 に均等に分配されたわけです。flex-growプロパティを指定したflexアイテムは、このようにして横幅が広がります。

これをもしflexアイテムごとに値を変えると、余白を分配される割合がflexアイテムごとに異なることになります。
各flexアイテムが同じ値なら「1」以外でも結果は同じ
先程の例のように、各flexアイテムを、それぞれ同じだけ横幅を広げる場合では、「1」以外の値を指定したとしても結果は同じです。例えば「2」にしたとしても、それは「2:2:2」ということなので値を「1」にした場合と結果は変わりません。
各flexアイテムをそれぞれ同じように横幅を広げるなら、値は「1」で良いということです。
では、flexアイテムごとにflex-growプロパティを指定し、それぞれ異なる値にした場合を説明します。flexアイテムごとに値を変えるということは、余白を分配される割合がflexアイテムごとに異なるということです。
個々のflex-growを異なる値にすると
flexアイテムごとに flex-growプロパティの値を変えてみます。
<ul class="flex_container">
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
</ul>
HTMLは先ほどと同じです。
.flex_container {
display: flex;
中略
}
.flex_container li {
中略
}
.flex_container li:nth-of-type(1) {
flex-grow: 1;
}
.flex_container li:nth-of-type(2) {
flex-grow: 2;
}
.flex_container li:nth-of-type(3) {
flex-grow: 3;
}
擬似クラスを使って、それぞれの li要素の flex-growプロパティに異なる値を指定しました。1番目の li要素には「1」、2番目の li要素には「2」、3番目の li要素には「3」です。
これは、各 li要素に 1:2:3 の割合で余白を分配されることになります。結果次のように表示されます。
- アイテム
- アイテム
- アイテム
flex-growに関して理解を深める
flex-growプロパティを理解する為に、明確な数値を用いて説明します。次のHTMLは、5個のli要素を持つリストです。
<ul class="flex_container">
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
</ul>
.flex_container {
display: flex;
中略
}
.flex_container li {
flex-grow: 1;
中略
}
次のように表示されます。
- アイテム
- アイテム
- アイテム
- アイテム
- アイテム
li要素が5個あるので、各 li要素の領域はそれぞれ 1/5 ずつです。次に、一部のflex-grow
の値を変更します。
.flex_container {
display: flex;
中略
}
.flex_container li {
flex-grow: 1;
中略
}
.flex_container li:nth-of-type(3) {
flex-grow: 2;
}
擬似クラスを使って、3番目の li要素のflex-grow
だけ値を「2」にしました。次のように表示されます。
- アイテム
- アイテム
- アイテム
- アイテム
- アイテム
3番目の li要素だけ幅が広くなりました。この場合、それぞれ指定したflex-growの関係は「1:1:2:1:1」です。これは、1+1+2+1+1 で、余白を6等分してそれらを伸長係数に応じて分配したことになります。
よって3番目の li要素は 2/6 で、後の4個の li要素は 1/6 ずつとなります。
まとめ
flex-growプロパティを指定することで、flexアイテムの横幅を広げることができます。
flex-grow: 値;
の形で記述します。
値は正の数値で指定します。初期値は「0」で、「0」ということは、広がらずにコンテンツ分の横幅しか持たないということです。
flex-growプロパティの値は、広がる横幅の絶対的な数値を意味するのではなく、相対的な割合を意味します。