CSS

flexプロパティの概要

flexプロパティでは、flex-growの値（伸長比）、flex-shrinkの値（縮小比）、flex-basisの値（基準サイズ）をまとめて指定します。値はそれぞれ半角スペースで区切ります。書式はflex: 伸長比 縮小比 基準サイズ;とします。

flexプロパティはflexアイテムに指定します。指定できる値、初期値や継承に関しては、flex-growなど各プロパティに従います。

flexプロパティの初期値は「0 1 auto」ということになります。言葉で表すと、「親要素に合わせた拡大はしないが縮小はする。そして伸縮前の基準サイズはコンテンツが収まる幅にする。」となります。

flexプロパティでは、まずflexアイテムの基準サイズをどうするか指定し、そしてそのflexアイテムが、親要素の

基準サイズ（3番目の値）

3番目の値である「基準サイズ」が「auto」の場合、伸縮前のflexアイテムはコンテンツが収まる幅（コンテンツが1行で収まるサイズ）で表示されます。

flexアイテムは、このサイズを基準にして伸縮することになり、その際の伸縮に関する指定が1番目と2番目の値です。

この基準サイズの値は、例えば「200px」というように絶対的な指定もできます。200pxというflexアイテムの寸法を基準にして、1番目と2番目の値に従って伸縮します。

伸長比（1番目の値）

1番目の値（flex-growの値）を「1」にすると、flexアイテムは横への広がりを可能にします。flexアイテムの基準サイズの合計よりもflexコンテナの横幅が広い場合、つまりflexアイテムが広がる余地がある場合、各flexアイテムは横幅を広げます。

この時の幅の広がり方は、flexコンテナの余った幅を、各flexアイテムに分配される形になります。では伸長比の値と分配の関係を、ナビゲーションメニューを具体例にあげて見ていきます。

伸長比の値（1番目の値）が「0」の場合、余った幅を分配する比率が「0:0:0:0」ということです。これは数値上、結果的に分配されていないのと同じ状態です。つまりflexアイテムは幅を広げません。

伸長比の値が「1」の場合、余ったスペースは各flexアイテムに「1:1:1:1」で分配されることになります。

縮小比（2番目の値）

flexアイテムの基準サイズの合計よりもflexコンテナの幅が狭まった場合、縮小比（2番目の値）が「1」ならば、各flexアイテムは横幅を縮めます。

縮小比の値（2番目の値）が「1」の場合、flexコンテナの横幅に対して足りなくなった幅の分を「1:1:1:1」で分配する形になります。これは横幅が縮むことを意味しています。そしてコンテンツ幅よりも縮む必要がある場合は、コンテンツであるテキストを改行させて表示します。

縮小比が「0」だった場合は「0:0:0:0」、つまり「分配されない」ということに等しくなります。これは、各flexアイテムは基準サイズよりも縮むことはないということです。結果、flexコンテナもそれ以下の幅にはなりません。

flexプロパティを指定した具体例

flexアイテムにflex: 0 1 auto;（初期値）を指定した場合を見てみます。

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>アクセス</li>
    <li>問い合わせ</li>
</ul>

ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
li {
    flex: 0 1 auto;
    padding: 0 10px;
}

表示結果は次のようになります。

基準サイズが「auto」なので、各flexアイテムはコンテンツ分の横幅しか持っていません。かつ、伸長比が「0」なので横幅を広げません。

縮小比は「1」なので、flexアイテムは、基準サイズよりも縮む必要がある場合、コンテンツを改行させながら縮みます。

次は、値を「1 1 auto」に指定してみます。

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>アクセス</li>
    <li>問い合わせ</li>
</ul>

ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
li {
    flex: 1 1 auto;
    text-align: center;
    padding: 0 10px;
}

この場合は次のようになります。

伸長比が「1」なので各flexアイテムは、flexコンテナの余った余白の分が分配されて横幅を広げます。また縮小比も「1」なので、基準サイズよりも狭まった時はコンテンツを改行させながら縮みます。

最後に、値を「1 0 auto」に指定してみます。

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>アクセス</li>
    <li>問い合わせ</li>
</ul>

ul {
    display: flex;
    background-color: #555;
    color: #fff;
}
li {
    flex: 1 0 auto;
    text-align: center;
    padding: 0 10px;
}

これは次のように表示されます。

拡大比が「1」なので各flexアイテムは横幅を広げます。

縮小比は「0」なので、たとえflexコンテナが基準のサイズの合計より狭まる条件下でも、各flexアイテムへの縮み幅の分配はありません。よって各flexアイテムは、基準サイズより縮むことはありません。

flexプロパティの値で使えるキーワード

flexプロパティでは、値の指定に用いる為のキーワードが用意されています。3個の値を指定する代わりに、キーワードでの指定ができるようにもなっています。

initial

「0 1 auto」と同じ。

auto

「1 1 auto」と同じ。

none

「0 0 auto」と同じ。

どのキーワードも3番目の値が「auto」なので、基準サイズを絶対的な数値で指定したい場合はキーワードを使えません。基準サイズが「auto」で良ければ、どのパターンもキーワードで対応できます。