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;
    }
  • 相关阅读:
    CoreOS Hyper-V 安装
    RancherOS Hyper-V 安装
    Android sdk content loader 0%的解决方案
    在launcher隐藏应用图标[大杂烩]
    RTSP、HTTP、HTTPS、SDP四种协议详解
    Webview上下滑动渐变色问题解决
    调节listview的item高度
    软键盘消失有残影 不影响activity原有布局 不会重绘之前界面
    android横竖屏禁止重新绘制的方法
    去除actionbar的左侧图标
  • 原文地址:https://www.cnblogs.com/ylhssn/p/13065195.html
Copyright © 2011-2022 走看看