はじめに 問題 早速ですが、こんな時どう実装しますか? 少し前までの私 Headerは、height: 100pxでpadding: 10pxということは上下のpaddingを足して120px Footerがheight: 50pxでpadding: 5pxだから同様に考えて、60px 合わせるとMain以外の部分が、180pxで、 Mainのpaddingが10pxだから、上下で20px必要で、 ふう... 問題点 HeaderとFooterの高さが変わると計算し直す必要がある HeaderやFooterが動的に高さが変わる場合、JSで高さを適用しないといけない etc... そこでflex-growを紹介します。 flex-growの紹介に入る前に、**Flexbox(フレックスボックス)**について語ります Flexbox Flexboxは、主に次の2つの部分から成り立っています f