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

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