css中flex实现的三列布局

在开发中，我们经常需要使用到三列布局，即左右元素宽度固定，中间元素自适应。废话不多说，直接上代码：

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
.box{
    display: flex;
    height: 60px;
    width: 100%;
    background-color: red;
}
.center{
    flex: 1;
    background-color: yellow;
}
.left,.right{
    width: 60px;
    background-color: pink;
}
</style>

相比较之前使用的的浮动（float）和定位（position）代码更加简洁，但是使用flex布局需要考虑到浏览器是兼容性。相关内容参考如下：

关于flex的W3C规范： http://dev.w3.org/csswg/css-flexbox-1/

浏览器兼容性可以参考CanIUse： http://caniuse.com/#feat=flexbox