在頁面布局時通常會遇到這樣一個問題，頁面內容太少時無法將內容區域撐開，從而使得footer下方有留白，使用flex布局可以很簡單的解絕這一問題。
html代碼如下：
<body> <header>header</header> <section class="main">content</section> <footer>footer</footer> </body>
將body的display屬性設置為flex，然后將方向設置列，同時將html和body都高度設置為100%，使其充滿整個屏幕。
html{ height:100%; } body{ height:100%; display:flex; flex-direction:column; }
接下來設置flex的三個屬性值就可以了（三個值都不支持負數）：
flex-grow：設置剩余空間分配情況。flex-grow的默認值為0，意思是該元素不索取父元素的剩余空間，如果值大於0，表示索取。值越大，索取的越厲害。不允許負值。
flex-shrink：父元素寬度小於子元素寬度之和時，子元素如何縮小自己的寬度的。默認值為1時表示超出地方平均分配。設置值越大，減小的越厲害。如果值為0，表示不允許收縮，設置多大就多大，當都設置為0是子元素會超出父元素。
flex-basis：該屬性用來設置元素的寬度，其實，width也可以設置寬度。如果元素上同時設置了width和flex-basis，那么width 的值就會被flex-basis覆蓋掉。basic簡單理解就是在計算剩余空間分配前去掉的空間，值為auto/具體的width/0。
下面只需要將剩余空間全部給主體部分，header和footer不分配剩余空間，僅占據自身大小的空間即可。
header{ /* 我們希望 header 采用固定的高度，只占用必須的空間 */ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex：0 0 auto； } section{ /* 將 flex-grow 設置為1，該元素會占用全部可使用空間 而其他元素該屬性值為0，因此不會得到多余的空間*/ /* 1 flex-grow, 0 flex-shrink, auto flex-basis */ flex：1 0 auto； } footer{ /* 和 header 一樣，footer 也采用固定高度*/ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex：0 0 auto； }
最終footer會始終在頁面底部。