弹性盒子--更便捷的布局

box-flex，弹性盒子是CSS3中新加入的一种布局模式，相对于传统的布局模式来说，它更为简便，最实用的一点就是它不存在设置浮动脱离了文档流后需要在某些地方清除浮动的问题。不过比较遗憾的是支持的浏览器只限于部分的浏览器，并且传统浮动问题也可以用一些通过使用一些框架（框架为布局提供了很多的方案）来解决，所以目前在pc端上我们几乎没见到box-flex的应用，不过在移动端（webkite浏览器几乎一统天下）应用就比较丰富了，话不多说，让我们来了解下box-flex。

定义与使用

.father:{display:box}/*对父元素的声明，表示父元素的空间是可以被子元素分配的。*/

假设要在父元素内部进行一个三栏布局，比例是1:3:1

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

假设要求中间固定二侧成比例自适应：

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

浏览器支持(摘自w3cshool)

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

ie9之前的浏览器不支持

所以写声明的时候，最好这么写

.father {    -moz-box-flex: 1;     -webkit-box-flex: 1;     box-flex: 1;}

.son{-moz-box-flex: 2;     -webkit-box-flex: 2;     box-flex: 2;}

每个盒子之间可以添加margin，比例分配以父容器扣掉margin再按照比例分配

盒子模型满足多种需求

1.控制子元素方向

box-orient：inline-axis（默认值，映射为horizontal），horizontal（水平排列），vertical（垂直排列），block-axis（同vertical），inherit（继承父元素的该属性）

找到一个属性演示的页面，做的很棒，什么时候csdn可以允许演示网页多好；

http://www.zhangxinxu.com/study/201012/css-box-orient-demo.html

2.设置元素排列顺序

box-direction：normal(按照正常的书写顺序)，reverse(按照书写的反转顺序)，inherit
3.设置元素的对齐方式

box-align：box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现

box-pack：水平的对齐方式

查看具体的属性值效果:

http://www.zhangxinxu.com/study/201012/css-box-align-demo.html

文章中演示例子来自于：张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]