弹性布局兼容性写法

笔记心得 0

开启弹性布局
display:

display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

定义子元素排列
flex-direction:

-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;

定义子元素换行情况
flex-wrap:

-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;


flex-flow:

-webkit-flex-flow:row wrap;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
-moz-flex-flow:row wrap;
box-orient:horizontal;
box-lines:multiple;
flex-flow:row wrap;

横向排列布局
box-pack:

-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit-moz-box-pack:center;
box-pack:center;


竖向排列布局
box-align:

align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;

伸缩盒子布局
flex:

box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;

元素出现顺序
order:

box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
order:num;
-webkit-order:num;