display:flex 弹性盒模型的一些兼容问题1

前端手机端开发模板
前端开发模板引擎
前端如何开发模板

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

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

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

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

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

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

-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+
============================================================
/
.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;
}

demo:
html 代码

<!DOCTYPE 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 {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
    </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下的子元素宽度和高度不能超过父元素,否则会导致子元素定位错误,例如水平垂直居中

open edx 模板前端开发
前端开发汇报总结ppt模板
web前端开发自我介绍模板
» 本文来自:前端开发者 » 《display:flex 弹性盒模型的一些兼容问题1》
» 本文链接地址:https://www.rokub.com/6139.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!