弹性布局

1. Css3弹性布局

2. 将对象作为弹性盒模型显示
（CSS3）
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:-ms-box;
display:box;

3. 语法：
box-orient：horizontal | vertical
默认值：horizontal
horizontal：设置弹性盒模型对象的子元素为水平排列
Vertical： --------------------------------------为纵向排列

4.  demo

5. 语法：
box-flex：<number>
默认值：0
取值：
<number>：使用浮点数指定对象所分配其父元素剩余空间的比例。

6.  demo

7. 倍数高的父元素的变化变化更多

8. 语法：
box-ordinal-group：<integer>
默认值：1
取值：<integer>：用整数值来定义弹性盒模型对象的子元素显示顺序。
说明：设置或检索弹性盒模型对象的子元素的显示顺序。
数值较低的元素显示在数值较高的元素前面；
相同数值的元素，它们的显示顺序取决于它们的代码顺序；

9.  demo

10. 应用
 弹性布局
 利于增加模块
 元素展示顺序不受HTML结构限制

11. thanks