说明：
display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前
缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。
不考虑IE浏览器的话，PC端上使用哪个都可以，一般使用display:flex；移动端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex两个都支持。
兼容性测试 参考：
http://www.cnblogs.com/ztwxiaoxiao/p/5028263.html
http://blog.csdn.net/qishuixian/article/details/53258807
用法：
1.box-flex:number;
1）占父级元素宽度的number份
2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按 number占份数
3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份
2.box-orient:horizontal/vertical
在父级上设置该属性，则子代按水平排列或竖直排列，该设置后的结果决定主轴对齐方式。
注：所有主流浏览器不支持该属性，必须加上前缀。
1）horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
2）vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。
3.box-direction:normal/reverse
在父级上设置该属性，确认子代的排列顺序。
1）normal 默认值，子代按html顺序排列
2）reverse 反序
4.box-pack:start/end/center
在父级设置，子代的在主轴上的对齐方式。
1）start 开始位置对齐
2）end 结束位置对齐
3）center 居中对齐
5.box-align:start/end/center/stretch
在父级设置，子代的在次轴上的对齐方式。
1）start 开始位置对齐
2）end 结束位置对齐
3）center 居中对齐
4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。