42.フレックスアイテムを知る ～ボックスとは違うアイテムのプロパティ～

フレックスボックスに対して設定するプロパティを昨日までまとめてきました。

本日からフレックスボックスの子要素、「フレックスアイテム」に対して設定するプロパティについてまとめていきます。

フレックスボックス内の子要素をフレックスアイテムといいます。

早速やっていきます。

フレックスアイテムの幅を広げて隙間を埋める　～flex-grow～

まず、前提ですがここからのプロパティはフレックスアイテム１つ１つに対して設定します。

flex-growはフレックスボックスとフレックスアイテムに隙間がある場合、

隙間をフレックスアイテムを長く(横幅を大きく)することで埋めることができます。

例えば、

お弁当箱(フレックスボックス)の中身がスカスカで寂しいから、ご飯の量(フレックスアイテムの横幅)を増やして隙間をなくす。

そんなイメージのプロパティです。

flex-grow : 1;

このプロパティには数字を設定します。デフォルトは0です。

この設定値は隙間を分け合う比率とでもいいましょうか。

フレックスボックスとフレックスアイテムの隙間を各アイテム毎に横幅として割合で分配します。

空き地(余白の幅)を権利者達の間で、割合に基づいて自分の土地(フレックスアイテムの横幅)にする。

みたいなイメージがわかりやすいと思います。

例えば、「フレックスアイテム A」１つだけにflex-grow : 1;を設定すると、他のフレックスアイテムは全てデフォルト値、つまりflex-grow : 0;ですから

隙間は全てフレックスアイテムAの横幅に割当られます。

具体的な数値で見てみましょう。以下はベースの図です。

フレックスアイテムの合計幅が300pxで、フレックスアイテム各幅が50px、フレックスボックスの横幅が400pxだとしたら

隙間は400px - 300px で100px。

ここへ「フレックスアイテム A」１つだけにflex-grow : 1;を設定すると、

1:0:0:0:0:0で分配…

つまり、全ての隙間がフレックスアイテムAの横幅に加算されるので、

フレックスアイテムAの横幅が50pxから150pxに。

最終的なフレックスアイテムの合計幅は400pxで、フレックスボックスと等しくなり隙間は0です。

と、このような形で隙間が割当られます。

仮にアイテムAにflex-grow : 1; 、アイテムBにもflex-grow : 1;を設定した場合、

隙間の100pxをアイテムAとBで1:1の割合で分け合うことになるので、

各々50pxずつ横幅が大きくなります。

図で表すと下図のようになります。

このようにフレックスボックスとアイテムの隙間を割合で横幅としてフレックスアイテムに吸収するのがflex-growです。

因みに、隙間がない状態でflex-growを指定した場合にどうなるのか実験してみましたが…

何も起こりません。(隙間がないので)

まだまだ、続きます。

が、それは明日にしようと思います。

今日のまとめ

• フレックスボックスにはボックスに対して設定するプロパティとは別に
  アイテムに対して設定するプロパティがある
• アイテムに対して設定するプロパティはアイテム毎に設定できる
• flex-growは隙間をアイテムの幅に割り当てる。隙間がなければ意味をなさない。

それにしても、フレックスボックスは奥が深いですね。

また、VSCodeのおかげで、

気になったら自分でテストしてみるというのが手軽にできます。

しかも無料で。

ありがたい限りですね。

では、また。