CSS3之弹性盒子

注意：限于兼容性的问题，目前在实际应用中还很少用到。

一、弹性盒子简介

在进行相关的页面布局时，可以使用table布局，自适应性很好，但是灵活性、语义性都不好，代码量偏大；当使用绝对定位时，自适应性又不太好；使用浮动的话，中间的主要内容会被最后加载，用户体验存在问题。

弹性盒子可以灵活的进行页面布局，而且除了兼容性问题外，弹性盒子相比其他任何一种方法都更简单易用，更容易理解。

二、弹性盒子的语法

弹性盒子的基本语法非常简单，首先需要对父元素进行一个声明：

.father {
	display: box;
}

有了这个声明，才能证明父元素的空间是可以被子元素分配的。假设要在这个父元素内部进行一个三栏布局，比例是1:3:1，代码如下：

.son1 {
	box-flex: 1;
}
.son2 {
	box-flex: 3;
}
.son3 {
	box-flex: 1;
}

这样一个1:3:1的自适应三栏布局就完成了。如果想要采用中间固定宽度，两侧成比例自适应的布局，相关代码示例：

.son1 {
	box-flex: 1;
}
.son2 {
	box-flex: 500px;
}
.son3 {
	box-flex: 1;
}

只要为son2指定宽度即可，剩余的空间则会按比例分配给son1和son2。

注意：目前webkit核心浏览器、火狐浏览器、IE10都支持带各自前缀的box-flex属性。Opera和IE9及以前版本的IE浏览器不支持弹性盒子。
代码示例：

.father {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: box;
}
.son {
	-webkit-box-flex: 4;
	-moz-box-flex: 4;
	-ms-box-flex: 4;
	box-flex: 4;
}

因为弹性盒子使用一种不同的布局逻辑，一些属性会在弹性容器内部无效：

• 多列模块中的column-*属性对弹性盒子无效。
• float和clear对弹性盒子无效，使用float会导致display属性计算为block。
• vertical-align对弹性子元素的对齐无效。

三、操作元素

1、控制子元素的方向（box-orient)

可以在父元素中定义box-orient属性来确定子元素排列的方向。可选的值有：horizontal、vertical、inline-axis、block-axis、inherit。

• inline-axis为默认值。
• horizontal和inline-axis：让子元素横排。
• vertical和block-axis：让元素竖排。
• inherit：继承父元素的相关属性。

2、控制元素对齐

box-align和box-pack都能决定盒子内部的剩余空间怎么使用。

（1）box-align

box-align决定了垂直方向上的的对齐表现，可选的参数有start、end、center、baseline、stretch。

• stretch：默认值，表示拉伸，当不规定子元素的高度时，子元素和父元素的高度保持一致。
• start：顶边对齐。
• end：底部对齐。
• center：居中对齐。
• baseline：基线（起始文字的底边位置线）对齐。

（2）box-pack

box-pack决定了父标签水平遗留空间的使用，可选值有start、end、center、justify。

默认值为start，具体表现类似于text-align的left、right、center、justify。

3、控制元素显示顺序（box-direction）

由于HTML元素的加载时按顺序进行的，如果页面的内容比较多，这个布局的显示顺序就变为两侧先加载出来，展示主要内容的中间部分最后加载。

box-direction这个属性可以确定子元素的排列顺序，可选值有：normal、reverse、inherit。

• normal：按照正常顺序进行排列，即从左到右，从上到下。
• reverse：与正常排列的顺序刚好相反。
• inherit：继承父元素的该属性值。

四、总结

• 弹性盒子不像其他一些只影响效果的CSS3属性，它主要应用在布局上，因此需要谨慎使用。
• 弹性盒子不仅可以制作水平的布局，也可以制作垂直的布局。
• 弹性盒子可以使用固定宽度，也可以使用比例，并且可以混用使用定宽和比例。
• 弹性盒子功能强大，但是由于兼容性问题，目前不适合在传统Web开发中使用，不过在移动开发方面有很好的前景。
• 使用弹性盒子需要对父元素进行声明，并且可以通过调整父元素的属性来控制子元素的方向、对齐、顺序等。