CSS

on Note

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コンテナに対してどういう状況なのかを見ておきます。

次のようなHTMLCSSのコードがあったとします。

<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-growプロパティの値を全部同じにした場合。
値を全部同じにした場合のイメージ

これをもし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プロパティの値は、広がる横幅の絶対的な数値を意味するのではなく、相対的な割合を意味します。