zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    内存对齐
    类和对象
    C++ 各种继承方式的类内存布局
    静态变量static
    程序内存布局
    String类
    C++与C的区别
    命名空间
    C
    D
  • 原文地址:https://www.cnblogs.com/ylhssn/p/13065195.html
Copyright © 2011-2022 走看看