码迷,mamicode.com
首页 > 其他好文 > 详细

flex 弹性布局各种坑爹兼容

时间:2018-05-30 12:05:43      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:.com   www   http   tps   center   direct   item   x-pack   lines   

参考链接:https://www.cnblogs.com/yangjie-space/p/4856109.html

 

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

定义子元素排列

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

定义子元素换行情况

-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;

横向排列布局

新版本justify-content的兼容情况

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

竖向排列布局

新版本align-items兼容情况

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

伸缩盒子布局兼容

新版本flex:num兼容

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

元素出现顺序

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

 

flex 弹性布局各种坑爹兼容

标签:.com   www   http   tps   center   direct   item   x-pack   lines   

原文地址:https://www.cnblogs.com/tangbuluo/p/9110036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!