css3弹性盒模型

弹性盒模型：

注意在试用的时候，父元素必须要加 ： display:-webkit-box 或 display:-webkit-inline-box;

展示效果如图：

Box-orient：定义盒模型的布局方向。

Horizontal:水平方向

vertical:垂直方向。

-webkit-box-orient:vertical; 则垂直显示。

反序展示代码

box-direction 元素排列顺序：

normal:正序   Reverse :反序默认是正序展示，反序展示的效果如图：

反序展示效果图

box-ordinal-group 设置元素的具体位置。

设置元素的具体位置

展示效果如图:

box-flex 定义盒子的弹性空间

子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和。

box-pack 对盒子富裕的空间进行管理。

star :所有子元素在盒子左侧显示，富裕空间在右侧

end ：所有子元素在盒子右侧显示，富裕空间在左侧。

center：所有子元素居中。

justify：富裕空间在元素之间平均分配。

平均分配的效果代码：

效果：

在垂直方向上对元素进行管理：

box-align:

star:所有子元素在居顶

end：所有子元素居底

center：所有子元素居中。