标签：
1. 弹性盒子语法
首先对父元素进行声明： .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;}
浏览器支持：webkit核心浏览器，火狐，IE10都支持带各自的前缀box-flex属性，
Opera和IE9之前的IE浏览器不支持弹性盒子。
兼容性代码如：
.father{
display:-webkit-box;
display:-moz-box; FF
display:-ms-box; IE10
display:box;
}
.son_content{
-webkit-box-flex:4;
-moz-box-flex:4;
-ms-box-flex:4;
box-flex:4;
}
某些属性在弹性盒子中无效：
多列模块中的column-*属性对弹性盒子无效
float和clear对弹性元素无效，使用float会导致display属性集散为block。
ertical-align对弹性元素的对齐无效
2. 操作元素（控制元素方向和对齐）
控制子元素方向
弹性盒子默认是横向布局，可以修改 box-orient 属性来确定子元素排列方向
inline-axis 默认值
inherit 继承父元素
horizontal 与 inline-axis效果一样，子元素横排
vertical 与 block-axis 让子元素竖排
控制子元素对齐
box-align 垂直方向对齐
stretch 默认，表示拉伸，高度与父元素一致
start 顶边
end 底部
center 居中
baseline
box-pack 水平一流空间的使用
start 默认，左边
end 右边对齐
center 中间对齐
justify 两边对齐
控制元素显示顺序
box-direction 控制元素显示顺序
normal 默认左右上下
reverse 反转
inherit
标签：
原文地址：http://www.cnblogs.com/zhangchen2015/p/4464547.html
