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

原创 15038098692 随笔 移动端 863阅读 2017-05-09 10:15:07 举报

在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 代码

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

评论 ( 2 )
最新评论
15038098692 1F 2017-05-09 11:05:51 2F

谢谢,查了查了一下 http://www.css88.com/archives/5670

meepo3927 2017-05-09 10:39:06 1F

使用autoprefixer,就可以了