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吧。

以上，完结撒花~