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