css3.弹性盒子

弹性盒子(Flexible Box)

注意：大都不兼容，目前需要加前缀，如-moz-box-pack.

1.box-orient

可取值box-orient：horizontal | vertical

默认值：horizontal

horizontal：
设置弹性盒模型对象的子元素为水平排列
vertical：
设置弹性盒模型对象的子元素为纵向排列

2.box-pack

可取值box-pack：start | center | end | justify

默认值：start

start：
设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）
center：
设置弹性盒模型对象的子元素居中对齐
end：
设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）
justify：
设置或弹性盒模型对象的子元素两端对齐

3.box-align

可取值：box-align：start | end | center | baseline | stretch
默认值：stretch

start：
设置弹性盒模型对象的子元素从开始位置对齐
center：
设置弹性盒模型对象的子元素居中对齐
end：
设置弹性盒模型对象的子元素从结束位置对齐
baseline：
设置弹性盒模型对象的子元素基线对齐
stretch：
设置弹性盒模型对象的子元素自适应父元素尺寸

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

5.box-flex-group
默认值：1
用整数值来定义弹性盒模型对象的子元素所在的组。

6.box-ordinal-group
默认值：1
用整数值来定义弹性盒模型对象的子元素显示顺序
数值较低的元素显示在数值较高的元素前面
相同数值的元素，它们的显示顺序取决于它们的代码顺序

7.box0direction
可取值box-direction：normal | reverse
默认值：normal
normal：
设置弹性盒模型对象的子元素按正常顺序排列
reverse：
反转弹性盒模型对象的子元素的排列顺序

8.box-lines
可取值box-lines：single | multiple
默认值：single
single：
弹性盒模型对象的子元素只在一行内显示
multiple：
弹性盒模型对象的子元素超出父元素的空间时换行显示

Ps注意：
box-flex:用来按比例分配父标签的宽度(或高度)空间;(1:1的比例可以很和谐，数值变动就会乱，在实际需求中可以要一个或多个固定宽度，最后一个自适应：box-flex值为1。