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没有实现效果。

这部分内容，有机会还得测试。