[CSS]そろそろFlexboxをまとめてみる Part.3

今回は「flex-grow」「flex-shrink」「flex-basis」3つと「flex」ショートハンドについてやってみようと思います。

基本のhtml

まずは基本になるhtmlから

それに対しCSSは

とすることで3カラムのレイアウトはできます。
そろそろFlexboxをまとめてみるFlexboxのいいところは内容量の違うboxが並んでも、高さを揃えてくれるところにあります。
デザインのよって高さを揃えなきゃいけないときには便利です。

flex-growプロパティ

flex-growプロパティはflexアイテムの伸び率を設定することができるプロパティで数字で指定します。

flexコンテナ内にflexアイテムが入っています。内容が少なくてflexコンテナに余りが出る場合でもflaxアイテムが自動的に伸びて余白を埋めてくれます。
その自動的に伸びる伸び率を指定できるのが「flex-grow」プロパティです。

とすると

そろそろFlexboxをまとめてみる

と均等にレイアウトされます。

flex-shrinkプロパティ

flex-shrinkプロパティはflexアイテムの縮む倍率を指定するプロパティで数字で指定します。

「flex-wrap:nowrap;」と同時にしていしないと無視されます。(「flex-wrap:nowrap;」は初期値なので特に設定する必要はありません。)

ここではわざとflexアイテムの幅を500pxにしてflexコンテナをはみ出す設定しています。
そこでColumn1だけに「flex-shrink:2;」を指定すると縮む倍率が他の2つのflexアイテムより2倍になります。

375px(実寸) ÷ Column 2(500px) = 0.75(75%)
よって25%の縮率となります。Column3も同様。

ですが、Column1は倍の50%の縮率となり、結果250pxとなります。

ちょっとややこしいですが・・・

そろそろFlexboxをまとめてみる

flex-basisプロパティ

flex-basisプロパティはwidthプロパティやheightプロパティと同じです。

「flex-direction」プロパティが「row」「row-reverse」のときは幅となり、「column」「column-reverse」のときは高さとなり単位付きの数字で指定します。

このように指定すると全体の幅は関係なく200pxづつで納まります。
そろそろFlexboxをまとめてみる

この3つのプロパティをまとめて指定できるのがショートハンドの「flex」になります。

flexプロパティ

となりますが、

  • 単位がない値を1つだけ指定するとflex-grow
  • 単位付きで1つだけ指定するとflex-basis
  • 単位なしと単位ありで2つの値を指定するとflex-growとflex-basis[flex:1 50%;]
  • 単位なしの値を2つ指定するとflex-growとflex-shrink

となります。

まとめ

色々やってみましたけど要はflaxプロパティを覚えておけば大丈夫ですね。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク