zoukankan      html  css  js  c++  java
  • 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;
  • 相关阅读:
    PCB封装分配
    1.26-CAD异形封装的制作
    1.40-CAE封装6个实例单门制作
    简单的URL解析
    冒泡排序和简单的递归
    作用域的提升
    数组的去重,以及随机一个验证码
    数组和字符串的相互转换。
    substring,substr,和slice的区别详解。
    去除Input输入框中边框的方式
  • 原文地址:https://www.cnblogs.com/tangbuluo/p/9110036.html
Copyright © 2011-2022 走看看