プログラミング記事:第十三回
Flex編
Flexの独自機能

どうも!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)、間違わないように気を付けてくださいね!