zoukankan      html  css  js  c++  java
  • flex 弹性盒子 兼容

    1.弹性布局

      display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

      display: -moz-box; /* 老版本语法: Firefox (buggy) */

      display: -ms-flexbox; /* 混合版本语法: IE 10 */

      display: -webkit-flex; /* 新版本语法: Chrome 21+ */

      display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

    2.主轴居中

      -webkit-box-pack: center;

      -moz-justify-content: center;

      -webkit-justify-content: center;

      justify-content: center;

    3.主轴两端对齐

      -webkit-box-pack: justify;

      -moz-justify-content: space-between;

      -webkit-justify-content: space-between;

      justify-content: space-between;

    4.主轴end对齐

      -webkit-box-pack: end;

      -moz-justify-content: flex-end;

      -webkit-justify-content: flex-end;

      justify-content: flex-end;

    5.主轴start对齐

      -webkit-box-pack: start;

      -moz-justify-content: flex-start;

      -webkit-justify-content: flex-start;

      justify-content: flex-start;

    6.侧轴居中

      -webkit-box-align: center;

      -moz-align-items: center;

      -webkit-align-items: center;

      align-items: center;

    7.侧轴start对齐

      -webkit-box-align: start;

      -moz-align-items: flex-start;

      -webkit-align-items: flex-start;

      align-items: flex-start;

    8.侧轴底部对齐

      -webkit-box-align: end;

      -moz-align-items: flex-end;

      -webkit-align-items: flex-end;

      align-items: flex-end;

    9.侧轴文本基本线对齐

      -webkit-box-align: baseline;

      -moz-align-items: baseline;

      -webkit-align-items: baseline;

      align-items: baseline;

    10.侧轴上下对齐并铺满

      -webkit-box-align: stretch;

      -moz-align-items: stretch;

      -webkit-align-items: stretch;

      align-items: stretch;

    11.主轴从上到下

      -webkit-box-direction: normal;

      -webkit-box-orient: vertical;

      -moz-flex-direction: column;

      -webkit-flex-direction: column;

      flex-direction: column;

    12.主轴从下到上

      -webkit-box-pack: end;

      -webkit-box-direction: reverse;

      -webkit-box-orient: vertical;

      -moz-flex-direction: column-reverse;

      -webkit-flex-direction: column-reverse;

      flex-direction: column-reverse;

    13.主轴从左到右

      -webkit-box-direction: normal;

      -webkit-box-orient: horizontal;

      -moz-flex-direction: row;

      -webkit-flex-direction: row;

      flex-direction: row;

    14.主轴从右到左

      -webkit-box-pack: end;

      -webkit-box-direction: reverse;

      -webkit-box-orient: horizontal;

      -moz-flex-direction: row-reverse;

      -webkit-flex-direction: row-reverse;

      flex-direction: row-reverse;

    15.不允许子元素缩小

      -webkit-box-flex: 0;

      -moz-flex-shrink: 0;

      -webkit-flex-shrink: 0;

      flex-shrink: 0;

    16.各个行中间对齐

      -webkit-align-content: center;

      align-content: center;

    17.各个行中间对齐

      -webkit-align-content: flex-start;

      align-content: flex-start;

    18.各个行中间对齐

      -webkit-align-content: flex-end;

      align-content: flex-end;

    19.各个行平均分布

      -webkit-align-content: space-between;

      align-content: space-between;

    20.各个行两端保留子元素与子元素之间间距大小的一半

      -webkit-align-content: space-around ;

      align-content: space-around ;

    21.父元素-横向换行

      -webkit-flex-wrap: wrap;

      -moz-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

      -o-flex-wrap: wrap;

      flex-wrap:wrap;

    22.父元素-不允许横向换行

      -webkit-flex-wrap: nowrap;

      -moz-flex-wrap: nowrap;

      -ms-flex-wrap: nowrap;

      -o-flex-wrap: nowrap;

      flex-wrap:nowrap;

    23.充满父元素

      -prefix-box-flex: 1;

      -webkit-box-flex: 1;

      -webkit-flex: 1;

      -moz-box-flex: 1;

      -ms-flex: 1;

      flex: 1;

    参考网站:https://www.cnblogs.com/amanda-man/p/9856557.html

  • 相关阅读:
    【微信小程序】---线上环境搭建
    【vue】---项目接口管理---【巷子】
    【微信小程序】---授权登陆---【巷子】
    【react】---17新增的生命周期
    laravel 管道设计模式
    vim相关
    OAuth 2.0及微信网页授权
    linux下目录的读、写、执行权限辨析
    NIM游戏
    姿态角(欧拉角)yaw、pitch、roll语义解释
  • 原文地址:https://www.cnblogs.com/wsw8384/p/10233324.html
Copyright © 2011-2022 走看看