flex布局示例

<section style="display:flex;"><div id="number1" style="border:1em solid #8af;">number 1</div><div id="number2" style="flex-grow:1;border:1em solid #a11;">number 2</div><div id="number3" style="border:1em solid #87a;">number 3</div>      </section>

传统的布局方法都是基于盒子模型，并结合display属性+position属性+float属性，布局起来比较麻烦；而该方法布局比较简单，不用使用float，但是兼容性问题需要考虑到~