前端开发使用display:flex 弹性盒模型的一些兼容问题

标准的前端开发流程图
web前端交互开发流程
前端开发管理流程图

在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。

使用display: flex;的时候需要加上

html 代码

$(‘#payIn’).bind(‘input propertychange’, function() {
    var val = $(this).val()
    if (val == ”) {
        $(‘#payInBtn’).attr({ disabled: ‘disabled’ })
    } else {
        $(‘#payInBtn’).removeAttr(‘disabled’)
    }
})

使用flex: 1;的时候要加上:
html 代码

-webkit- box – flex: 1;
-moz – box – flex: 1;
-ms – flex: 1;

使用flex-direction: column;的时候需要加上:
html 代码

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;

使用align-items: center;的时候需要加上:-webkit-box-align: center;

/ ============================================================
flex:定义布局为盒模型
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+
============================================================
/
html 代码

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.flex-v {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.flex-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex-pack-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.flex-pack-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <meta
            content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”
            name=”viewport”
        />
        <meta content=”yes” name=”apple-mobile-web-app-capable” />
        <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
        <meta content=”telephone=no” name=”format-detection” />
        <meta content=”email=no” name=”format-detection” />
        <style type=”text/css”>
            /* ============================================================
flex:定义布局为盒模型
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+
============================================================ */
            .flex {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
            }
            .flex-v {
                -webkit-box-orient: vertical;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
            }
            .flex-1 {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            .flex-align-center {
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
            }
            .flex-pack-center {
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
            }
            .flex-pack-justify {
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                -ms-flex-pack: justify;
                justify-content: space-between;
            }
        </style>
    </head>
    <body>
        <div class=”flex flex-pack-justify”>
            <div>模块一</div>
            <div>模块二</div>
            <div>模块三</div>
            <div>模块四</div>
        </div>
    </body>
</html>
使用注意:

flex下的子元素必须为块级元素,非块级元素在android2.3机器下flex失效
flex下的子元素宽度和高度不能超过父元素,否则会导致子元素定位错误,例如水平垂直居中

前端网络开发流程图
前端开发画图流程
前端开发的详细流程
» 本文来自:前端开发者 » 《前端开发使用display:flex 弹性盒模型的一些兼容问题》
» 本文链接地址:https://www.rokub.com/7144.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!