zoukankan      html  css  js  c++  java
  • 兼容新旧浏览器的flex写法


    文章出处:https://blog.csdn.net/qq_22844483/article/details/72773490

    /* 定义 */
    .flex-def {
        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+ */
    }
    
    兼容写法:
    .flex-def {
        display: -webkit-flex;
        display: flex;         
        display: -webkit-box;  
        display: -moz-box;   
        display: -moz-flex;    
        display: -ms-flexbox;
    }
    
    .flex1{
    -webkit-flex: 1;       
        -ms-flex: 1;            
        flex: 1;               
        -webkit-box-flex: 1;   
        -moz-box-flex: 1; 
    }
    
    /* 主轴居中 */
    .flex-zCenter {
        -webkit-box-pack: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    
    /* 主轴两端对齐 */
    .flex-zBetween {
        -webkit-box-pack: justify;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    
    /* 主轴end对齐 */
    .flex-zEnd {
        -webkit-box-pack: end;
        -moz-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    
    /* 主轴start对齐 */
    .flex-zStart {
        -webkit-box-pack: start;
        -moz-justify-content: start;
        -webkit-justify-content: start;
        justify-content: start;
    }
    
    /* 侧轴居中 */
    .flex-cCenter {
        -webkit-box-align: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        align-items: center;
    }
    
    /* 侧轴start对齐 */
    .flex-cStart {
        -webkit-box-align: start;
        -moz-align-items: start;
        -webkit-align-items: start;
        align-items: start;
    }
    
    /* 侧轴底部对齐 */
    .flex-cEnd {
        -webkit-box-align: end;
        -moz-align-items: flex-end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }
    
    /* 侧轴文本基线对齐 */
    .flex-cBaseline {
        -webkit-box-align: baseline;
        -moz-align-items: baseline;
        -webkit-align-items: baseline;
        align-items: baseline;
    }
    
    /* 侧轴上下对齐并铺满 */
    .flex-cStretch {
        -webkit-box-align: stretch;
        -moz-align-items: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }
    
    /* 主轴从上到下 */
    .flex-zTopBottom {
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    
    /* 主轴从下到上 */
    .flex-zBottomTop {
        -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;
    }
    
    /* 主轴从左到右 */
    .flex-zLeftRight {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    
    /* 主轴从右到左 */
    .flex-zRightLeft {
        -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;
    }
    
    /* 是否允许子元素伸缩 */
    .flex-item {
        -webkit-box-flex: 1.0;
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }
    /* 子元素的显示次序 */
    .flex-order{
        -webkit-box-ordinal-group: 1;
        -moz-order: 1;
        -webkit-order: 1;
        order: 1;
    }

    有助于理解,收集的网址:

    https://www.cnblogs.com/xuyuntao/articles/6391728.html 浅谈CSS3中display属性的Flex布局
    https://www.cnblogs.com/qingchunshiguang/p/8011103.html 布局神器display:flex
    https://blog.csdn.net/u010130282/article/details/52627661 CSS之flex兼容(先后顺序)

    我就是我,记性不好,那就用写的吧。
  • 相关阅读:
    haproxy 2.5 发布
    cube.js sql 支持简单说明
    基于graalvm 开发一个cube.js jdbc driver 的思路
    apache kyuubi Frontend 支持mysql 协议
    oceanbase 资源池删除说明
    基于obd 的oceanbase 扩容说明
    jfilter一个方便的spring rest 响应过滤扩展
    cube.js schema 定义多datasource 说明
    typescript 编写自定义定义文件
    meow 辅助开发cli 应用的工具
  • 原文地址:https://www.cnblogs.com/rainy0496/p/9645569.html
Copyright © 2011-2022 走看看