CSS

幅が広がるとはどういうことか

まず、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アイテムごとに異なることになります。

<ul class="flex_container">
    <li>アイテム</li>
    <li>アイテム</li>
    <li>アイテム</li>
</ul>

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

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 ずつとなります。