flex實現CSS經典佈局：上中下三行，中間自適應佔滿 以及在IE10+上的兼容性踩坑

此次的目標是實現一個簡單的CSS經典佈局，即上中下三行，上下定高，中間自適應佔滿，這種佈局常見於文章正文頁，列表頁等，上邊是導航，中間是內容部分，下邊是底部信息欄，包括版權信息等。中間自適應佔滿保證在中間內容部分高度不夠時，底部信息欄不至於提到半腰，十分不美觀。

flex確實給前端帶來了不少便利，以往實現這種佈局，每每都是使用絕對定位或者JS動態調整，雖然也能夠實現，可是不夠直觀，我認爲更接近於一種hack，使用flex後，較短的代碼就能夠實現這個佈局，廢話很少說，上代碼：

HTML部分：

<div class="wrapall">
    <header>我是header</header>
    <main>我是main</main>
    <footer>我是footer</footer>
</div>
複製代碼

CSS部分：

* {
    margin: 0;
    padding: 0;
}

.wrapall {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    flex: 0 0 auto;
    background-color: pink;
}

main {
    flex: 1 1 auto;
    background-color: aqua;
}

footer {
    flex: 0 0 auto;
    background-color: lightgreen;
}
複製代碼

稍微解釋下，在最外層class=wrapall使用display: flex，指定爲 flex 佈局，而且設置最小高度爲100vh，使用flex-direction: column指定主軸爲垂直方向，起點在上沿。

以後在header，footer兩個項目上使用flex: 0 0 auto，這是一個縮寫，至關於flex-grow: 0; flex-shrink:0; flex-basis: auto的簡寫，表示項目在任何狀況下都不放大或縮小，保持項目的原本大小。

以後在中間main這個項目上使用：flex: 1 1 auto，更簡短的縮寫是flex: auto，至關於flex-grow: 0; flex-shrink:0; flex-basis: auto的簡寫，表示在空間變化時放大或縮小，而且分配餘下的空間。

這樣就能夠實現咱們預期的佈局了，這幾個項目都設置了背景色，便於區分，在chrome瀏覽器上顯示以下：

能夠看到，在中間的項目高度不足時，依然填充了剩餘空間。

寫到這裏，若是不考慮IE兼容性的問題，只使用現代瀏覽器的狀況下，已經沒有問題了，若是有IE兼容需求的話，這樣的佈局IE10+是沒法識別的，在IE10打開的顯示以下：

能夠看到，咱們指望的佈局並無實現，我就是在公司的項目踩到了這個坑，最開始一直在考慮是flex兼容性的問題，可是那個項目使用了postcss，而且在CANIUSE上檢查flex兼容性，並無說flex-grow: 1在IE10無效，當時就有點摸不着頭腦。

後來意識到，這可能不是flex-grow的問題，而是min-height的問題，研究測試以後發現，在IE10+，flex佈局雖然可用，可是最外層的flex佈局，即最外層的class=wrapall使用display: flex時，不能同時設置min-height，因此在最外層class=wrapall外再加一層，HTML代碼以下：

<div class="wrapall-fixIE">
    <div class="wrapall">
        <header>我是header</header>
        <main>我是main</main>
        <footer>我是footer</footer>
    </div>
</div>
複製代碼

CSS新增代碼以下：

.wrapall-fixIE {
    display: flex;
}

.wrapall {
    ...
    width: 100%;
}
複製代碼

即在外層新增一個flex佈局節點class=wrapall-fixIE，保證設置min-height的不是最外層flex節點，值得注意的是，須要在以前的最外層class=wrapall設置width爲100%，這是因爲flex內部的元素並不是block，在內容寬度不足的狀況下不會佔據所有寬度。

這就是flex實現CSS經典佈局上中下三行以及兼容IE的全過程了，其實能夠同理實現聖盃佈局，實現聖盃佈局的時候，因爲不存在min-height的限制，因此即便在實現IE10+兼容時，也不須要包裹一個class=wrapall-fixIE做爲最外層了，可是在IE10上flex項目未必被識別爲block元素，因此在項目上添加display: block，能夠少踩一些坑。flex確實是個利器，可是兼容IE確實有一點點麻煩，因此人生苦短，拋棄IE吧。

以上，完結撒花~