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