「flexの超基本レイアウト」・「flexの基本レイアウト」・「flexレイアウト その３」
と続いてきたflexレイアウトの話も今回が最後です。
最後はflexアイテムのサイズを決定する「flex-grow」「flex-shrink」「flex-basis」の３つ。
まずは拡大率を決めるflex-growと、縮小率を決めるflex-shrinkです。
flex-grow & flex-shrink
flex-grow / flex-shrinkはどちらも整数を値にして、flexアイテムの拡大（縮小）率を決定します。
flex-grow
まずはflex-grow(拡大)から。
仮に、
#item1{
flex-grow: 1;
}
#item2{
flex-grow: 2;
}
#item3{
flex-grow: 3;
}であれば、拡大率は１：２：３の比率になります。
気をつけておきたいのは、flexアイテムの大きさがこの比率で拡大するのではなく、flexボックス(親要素)の余白を、この比率で分けあうということ。
次のデモ画面、黒枠で囲んだ親要素(width 300px)に、子要素(w60px)がflexで横並びになっています。
300px – 60px * 3 = 120px が余白部分です。
ここにflex-grow値をセットすると余白120を１：２：３で分け合うので、
1つ目のアイテムに +20px = 80px
2つ目のアイテムに +40px = 100px
3つ目のアイテムに +60px = 120px
となります。
余白がゼロであれば変化無しです。
ちなみに、firefoxブラウザとchromeでしか確認していませんが、width: 0;に指定してflex-growを設定すると、flex-growで割り振られた比率のサイズになります。
下がそのデモですが、皆様のブラウザではどのように表示されているでしょうか？
flex-shrink
次は縮小のflex-shrinkですが、growの逆と思っていただければ早いです。
スペースが足りなかった場合に、不足分をflex-shrinkの比率で分け合って縮小します。
次のデモではアイテムのサイズを60pxから120pxに変更しています。
300px – 120px * 3 = マイナス60px なので、60pxを１：２：３で分け合って縮小しています。
1つ目のアイテム -10px = 110px
2つ目のアイテム -20px = 100px
3つ目のアイテム -30px = 90px
「スペースが足りなかった場合」ということは、flex-wrap : wrapの状態ではflex-shrinkは効きません。wrap だとスペースが足りない場合はアイテムが段落ちしますからね。
（flex-wrap: wrap;）
基準サイズを決めるflex-basis
flex-basisはブラウザによって若干挙動が違うときがあるので、個人的にはあまり使わないプロパティです。
最初に覚えておくべきことは
flex-basisは、pxなどの数値指定、または % 指定が一般的です。キーワード指定もあるのですが、挙動が不安定すぎておすすめしません。
最初に書いたとおり、flex-basisとwidth両方が指定されているときはflex-basisの値が優先され、min-width・max-widthによるサイズ制限は受けます。
flexボックスが大きく余白が残るようなときはflex-basisのサイズ通りに表示されますが、収まらない場合はflex-basisの値を「基準」として、相対的なサイズに縮小されていきます。
#1{
flex-basis: 50px;
}
#2{
flex-basis: 100px;
}
#3{
flex-basis: 150px;
}デモの通り、コンテンツ幅よりも小さくはなれません。また、flex-shrinkが設定されている場合はそちらが優先されます。
flexプロパティ
flexプロパティは、flex-grow -shrink -basis を一括指定できるショートハンド型。
空白区切りで３つの値を指定します。
例えば、flex: 2 1 30px ; とすると、grow(2) shrink(1) basis(30px) ということになります。
値１つの場合は「flex-grow」のみ指定。
値２つ＆２つ目が整数の場合は 「grow shrink」 の指定。
値２つ＆２つ目がpx %などだと、「grow basis」 の指定となります。
#{
flex: 1; /* = flex-grow: 1; */
flex: 2 1; /* = flex-grow:2; flex-shrink:1; */
flex: 2 50px; /* = flex-grow:2; flex-basis:50px; */
flex: 2 1 50px; /* = flex-grow:2;flex-shrink:1;flex-basis:50px; */
}まとめて指定できるので慣れると便利な書き方です。
では以上でflexレイアウト編は終了です。
