- 首页 > it技术 > >
// 开启弹性布局
display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
// 定义子元素排列
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-moz-box-orient:horizontal;
-moz-box-direction:normal;
( 子元素横向排列 默认 )
box-orient:horizontal;
box-direction:normal;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-box-orient:horizontal;
-webkit-box-direction:reverse;
-moz-box-orient:horizontal;
-moz-box-direction:reverse;
( 子元素横向反转排列 )
box-orient:horizontal;
box-direction:reverse;
-webkit-flex-direction:row-reverse;
flex-direction:column;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
( 子元素竖向排列 )
box-orient:vertical;
box-direction:normal;
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-moz-box-direction:reverse;
( 子元素竖向反转排列 )
box-orient:vertical;
box-direction:reverse;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
// 定义子元素横向排列布局
-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
(横向据中排列布局)
-webkit--moz-box-pack:center;
box-pack:center;
webkit--moz-box-pack:center;
-webkit-justify-content:space-between;
-moz-box-pack:center;
-moz-justify-content:space-between;
(横向两边排列布局)
-ms-flex-pack: center;
-ms-justify-content:space-between;
box-pack:center;
justify-content:space-between;
-webkit-box-pack: center;
-webkit-justify-content: space-around;
-moz-box-pack:center;
-moz-justify-content: space-around;
-ms-flex-pack: center;
-ms-justify-content: space-around;
box-pack:center;
justify-content: space-around;
// 定义子元素竖向排列布局
align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;
// 定义子元素换行
-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;
//-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;
//伸缩盒子布局兼容 flex:num;
的兼容
box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
-webkit-flex:num;
flex:num;
//元素出现顺序 order:num兼容
box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
-webkit-order:num;
order:num;
推荐阅读
