基於 Flex 實現兩端對齊垂直佈局

通常來講佈局咱們都是水平佈局，最多搞個垂直居中。並且對於一些 float 、 position 好像自己就不太適合垂直佈局。

正好前段時間用 weex 作了一個頁面，weex 天生基於 flex 。且 weex 中 flex-direction 默認值爲 column，flex-direction 定義了 flex 容器中 flex 成員項的排列方向。

頁面分爲三部分（header，section，footer），有一些優化的點：

1. 相似兩端對齊，可是最好可讓 section 偏上一點
2. 儘量一屏顯示，若是不夠那麼出滾動條。

那麼咱們來看看有什麼方案能夠實現。

基於 Flex 實現

<div id="app">
    <header>
        我是頭部，我但願我無論大小屏幕都在最上面
    </header>
    <section>
        <div>我是內容，我但願我在屏幕的中間顯示，我不但願我壓住其餘內容，我但願一屏能夠展現這個頁面</div>
    </section>
    <footer>
        我是底部，我但願我能夠據底，若是屏幕超出了，我滑動可見。
    </footer>
</div>

先設置一下基礎條件 display: flex;flex-direction: column;，由於瀏覽器默認是水平對齊。

而後咱們給盒子設置一下 min-height:500px 模擬一屏高度，正常能夠使用 min-height: 100vh 或者 html,body{height: 100%;} 。

地址：https://www.lilnong.top/static/html/flex-direction-column-sf.html

justify-content: space-between;

咱們能夠直接暴躁的設置兩端對齊 #app{justify-content: space-between;}
justify-content: space-between; 第一個沒有前padding，最後一個沒有後padding
justify-content: space-around; 每個塊先後padding同樣大，也意味着相鄰之間是雙倍 padding
justify-content: space-evenly; 每一個空白區域同樣大

看上去是實現了，可是若是咱們還但願微調位置，那麼就很難搞（變大，而後設置 min-height，容許縮小）。
地址：https://www.lilnong.top/static/html/flex-direction-column-sf.1.html

flex: 1 0 auto

flex 是什麼意思呢？是 flex-grow （放大）、flex-shrink （縮小）、flex-basis（基準大小） 的縮寫。

那咱們能夠考慮用 section 撐開，而後內容垂直居中便可。

注意看這個方案和上一個方案的背景色就能看出差異，可是一樣不太好操做。

測試地址：https://www.lilnong.top/static/html/flex-direction-column-sf.2.html

flex: 1 + 空白塊

基於上面的方案，咱們知道 flex 能夠自動放大和縮小，那麼咱們用他來作空白區域不就 OK 了？

地址： https://www.lilnong.top/static/html/flex-direction-column-sf.3.html

若是爲了讓下面的空白區域更大，咱們能夠給 flex-grow: 3; 更大的縮放區域

其餘方案

1. section 保留安全區域(min-height)，上下padding。頭尾absolute。
2. 絕對定位，容易被覆蓋。

還有什麼方案呢？

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。