flexアイテムのサイズを決める grow shrink basis


flexの超基本レイアウト」・「flexの基本レイアウト」・「flexレイアウト その3

と続いてきたflexレイアウトの話も今回が最後です。

最後はflexアイテムのサイズを決定する「flex-grow」「flex-shrink」「flex-basis」の3つ。

まずは拡大率を決める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;
}

であれば、拡大率は1:2:3の比率になります。

気をつけておきたいのは、flexアイテムの大きさがこの比率で拡大するのではなく、flexボックス(親要素)の余白を、この比率で分けあうということ。

次のデモ画面、黒枠で囲んだ親要素(width 300px)に、子要素(w60px)がflexで横並びになっています。

60px
60px
60px

300px – 60px * 3 = 120px が余白部分です。

ここにflex-grow値をセットすると余白120を1:2:3で分け合うので、
1つ目のアイテムに +20px = 80px
2つ目のアイテムに +40px = 100px
3つ目のアイテムに +60px = 120px

となります。

grow:1
grow:2
grow:3

余白がゼロであれば変化無しです。

ちなみに、firefoxブラウザとchromiumでしか確認していませんが、width: 0;に指定してflex-growを設定すると、flex-growで割り振られた比率のサイズになります。
下がそのデモですが、皆様のブラウザではどのように表示されているでしょうか?

width:0
width:0
width:0

flex-shrink

次は縮小のflex-shrinkですが、growの逆と思っていただければ早いです。
スペースが足りなかった場合に、不足分をflex-shrinkの比率で分け合って縮小します。

次のデモではアイテムのサイズを60pxから120pxに変更しています。

300px – 120px * 3 = -60px なので、60pxを1:2:3で分け合って縮小しています。

shrink:1
shrink:2
shrink:3

1つ目のアイテム -10px = 110px
2つ目のアイテム -20px = 100px
3つ目のアイテム -30px = 90px

「スペースが足りなかった場合」ということは、flex-wrap : wrapの状態ではflex-shrinkは効きません。wrap だとスペースが足りない場合はアイテムが段落ちしますからね。

shrink:1
shrink:2
shrink:3

(flexwrap: wrap;)

基準サイズを決めるflex-basis

flex-basisはブラウザによって若干挙動が違うときがあるので、個人的にはあまり使わないプロパティです。

最初に覚えておくべきことは

  • flex-basisはwidthより優先される
  • min-width・max-widthによる制限は受ける
  • flexアイテムとなったときのサイズを保証するものではない
  • コンテンツサイズより小さくはならない

flex-basisは、pxなどの数値指定、または % 指定が一般的です。キーワード指定もあるのですが、挙動が不安定すぎておすすめしません。

最初に書いたとおり、flex-basisとwidth両方が指定されているときはflex-basisの値が優先され、min-width・max-widthによるサイズ制限は受けます

flexボックスが大きく余白が残るようなときはflex-basisのサイズ通りに表示されますが、収まらない場合はflex-basisの値を「基準」として、相対的なサイズに縮小されていきます。

#1
#2
#3
#1{
flex-basis: 50px;
}
#2{
flex-basis: 100px;
}
#3{
flex-basis: 150px;
}

デモの通り、コンテンツ幅よりも小さくはなれません。また、flex-shrinkが設定されている場合はそちらが優先されます。

flexプロパティ

flexプロパティは、flex-grow -shrink -basis を一括指定できるショートハンド型。

空白区切りで3つの値を指定します。

例えば、flex: 2 1 30px ; とすると、grow(2) shrink(1) basis(30px) ということになります。

値1つの場合は「flex-grow」のみ指定。
値2つ&2つ目が整数の場合は 「grow shrink」 の指定。
値2つ&2つ目が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レイアウト編は終了です。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年3月21日HTML/CSScss,display_flex,flex-item

Posted by ミフネWEB