flex 弹性布局各种坑爹兼容
Posted 糖糖部落
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex 弹性布局各种坑爹兼容相关的知识,希望对你有一定的参考价值。
参考链接: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 弹性布局各种坑爹兼容的主要内容,如果未能解决你的问题,请参考以下文章