弹性盒子

 

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