WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

Flexboxの応用

前回の記事でFlexboxの便利さがなんとなく判ったと思います。今回はもう少し具体的な使い方をしていきます。

前回の記事
yachin29.hatenablog.com



今回は

  • 高さが分からないフッタを常に最下部に表示
  • 高さが分からない要素を天地左右の中央に配置
  • Flexboxを使った柔軟なグリッド

philipwalton.github.io

高さが分からないフッタを常に最下部に表示


f:id:yachin29:20160302021358j:plain


ここで出て来たビューポートは相対的な単位で、それ自身が客観的な大きさを持っていないことを意味し、ビューポートのサイズによって決定されます。
vw ビューポートの幅の1/100
vh ビューポートの高さの1/100
bitsofco.de