どうも！NISO desu!
今日のプログラミング記事はFlexの話を続けたいとおもいます！
こんなときこそ、やはり例の曲を。。（♪♪♪♪♪♪♪）
はい、改めて、どうもー！あなたの愛しい司会のNISO desu!
前回はflexと他の要素の違いを説明しましたが、今日はね。。本番に入りますよ。
（♪♪♪♪♪♪♪）
Flexの独自機能ですね
（♪♪♪♪♪♪♪）
実際display:flex以外にも、Flex自身も独自なプロパティを持っています。
flexプロパティは関数三個入れています。
こちらですね↓↓↓↓↓
- flex-grow
- flex-shrink
- flex-basis
ちなみにflexは子要素なので、flexを使いたい場合は先に親枠にdisplay:flexを設定しなければならないです。
それでは先にflex-growを説明しようと思います！
名前通りflex-growは指定された枠を伸長する意味です。
話より実例を見たほうが早いので、早速みてみましょう！
display:flexのみ
青い枠にflex-grow:1を設定したら、親枠の空いてるところが使われますので、結構伸びます
次はflex-shrinkですね。shrinkは縮むという意味を持ってますので、flex-growの逆になっています。
早速例見てみましょう！
ちなみに上の設定ではflexの親枠は埋まってないため、そのままshrink設定してもなにも変わらないので、先にwidth:100%を入れますね。
display:flexとwidth:100%のみ
flex-float:10を設定し、青い枠が縮んで、赤い枠がちょっと伸びる
そして、最後のflex-basisは比例のことですね。長さを入力して、他の枠に合わせて、最適に表示されます。
青い枠に70%を設定して、赤い枠に30%を設定しました。
flexを設定するときはこの順番になりますので、flex:(flex-grow) (flex-shrink) (flex-basis)、間違わないように気を付けてくださいね！