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

弹性布局 兼容性写法

时间:2017-12-06 20:08:19      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:splay   情况   定义   isp   换行   cal   flow   xbox   兼容性   

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;

  

弹性布局 兼容性写法

标签:splay   情况   定义   isp   换行   cal   flow   xbox   兼容性   

原文地址:http://www.cnblogs.com/handsome-jm/p/7994197.html

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