• flex布局兼容IE10


    下文内容摘自:https://blog.csdn.net/mazhili1991/article/details/104476445/

    在IE10浏览器中,使用flex布局的常用兼容性代码:

    /*display*/
    .display_flex{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    .display_flex > *{
        display: block;
    }
    .display_inline-flex{
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;    
    }
    .display_inline-flex > *{
        display: block;
    }
    /*伸缩流方向*/
    .flex-direction_column{
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    /*主轴对齐*/
    .justify-content_flex-center{
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .justify-content_flex-end{
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    .justify-content_flex-justify{
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    /*侧轴对齐*/
    .align-items_flex-start{
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    .align-items_flex-end{
        -webkit-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }
    .align-items_center{
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .align-items_baseline{
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline;
    }
    /*伸缩性*/
    .flex_auto{
        -webkit-box-flex: 1;
        -ms-flex: auto;
        -webkit-flex: auto;
        flex: auto;
    }
    .flex_1{
        width: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;    
    }
    /*显示顺序*/
    .order_2{
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
    }
    .order_3{
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
    }
  • 相关阅读:
    thinkphp中的验证码的实现
    js深入研究之牛逼的类封装设计
    js深入研究之函数内的函数
    js深入研究之初始化验证
    js深入研究之Person类案例
    js深入研究之匿名函数
    js深入研究之类定义与使用
    sublime text3 自动编译php 适合用于简单的php文件执行
    PHP实现四种基本排序算法 得多消化消化
    thinkphp中的类库与引用import引入机制
  • 原文地址:https://www.cnblogs.com/ylhssn/p/13065195.html
Copyright © 2020-2023  润新知