找回密码
当前位置：前端开发者 > 教程 > 正文

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

2018-12-17 分类：教程 阅读(659) 评论(0)
标准的前端开发流程图
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下的子元素宽度和高度不能超过父元素，否则会导致子元素定位错误，例如水平垂直居中

前端网络开发流程图
前端开发画图流程
前端开发的详细流程
赞(0)
前端开发者 » 前端开发使用display:flex 弹性盒模型的一些兼容问题
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论