CSS3 弹性盒模型
CSS3 弹性盒模型
实例代码：
实例效果：
注意：要使弹性盒模型生效，需设置元素的display值为box或inline-box。
属性说明：
box-orient: horizontal || vertical，默认值为horizontal
a) horizontal vertical分别设置弹性盒模型的子元素水平或纵向排列
===========================================
box-pack: start || center || end || justify，默认值start
设置弹性盒模型对象子元素的对齐方式
a) start: 子元素从头开始对齐(有可能等同于左对齐)
b) center: 子元素居中对齐
c) end: 从结束位置对齐(有可能等同于右对齐)
d) justify: 子元素两端对齐
对齐方式取决于box-orient的值，box-orient: horizontal时box-pack: start，end的对齐方式为左右对齐；box-orient: vertical时box-pack: start，end的对齐方式为顶部和底部对齐。
===========================================
box-align: start || center || end || baseline || stretch，默认值stretch
这个属性与box-pack相同，用于设置弹性盒模型对象子元素的对齐方式
a) start: 子元素从开始位置对齐
b) center: 子元素居中对齐
c) end: 从结束位置对齐
d) baseline: 子元素基线对齐
e) stretch: 子元素自适应父元素尺寸
对齐方式也取决于box-orient的值，box-orient: horizontal时box-align: start，end的对齐方式为顶部和底部对齐；box-orient: vertical时box-align: start，end的对齐方式为左右对齐。
===========================================
box-flex: <number>，默认值 0
弹性盒模型对象的子元素如何分配其剩余空间
代码示例：
实例结果：
这种布局只是相对来说的，当1,2,3中任意一个的内容超过父元素宽度或者指定的比例空间，那么这部分空间就会变大甚至会把其余的元素覆盖。
===========================================
box-flex-group: <integer>，默认值 1
动态给数值较大的组分配其内容所需的实际空间(如无内容、padding、border则不占空间)，剩余空间则均分给数值最小的那个组(可能有1个或多个元素)。意思是说先跟值大的分配空间后(根据内容分配)在把剩余空间分配给小值的。
实例代码：
实例结果：
注意：这个属性必须配合box-flex属性一起使用，否则没有效果。
===========================================
box-ordinal-group: <integer>，默认值 1，子元素显示的顺序
a) 数值高的显示在后面
b) 数值相同取决于他们的默认顺序
===========================================
box-direction: normal || reverse，默认值 normal 子元素的排列顺序反转
a) normal 正常顺序
b) reverse 排列顺序反转
c) 排列方式反转的同时元素的对齐方式也反转了，Safari和Chrome则只是反转元素排列顺序
===========================================
box-lines: single || multiple，默认值 single 子元素是否可以换行显示
Safari和Chrome没有实现效果。
这部分内容，有机会还得测试。