微信html兼容性问题,解决UC浏览器、微信浏览器使用display:flex;的兼容性问题

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

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

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

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

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

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

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

box-orient: vertical;

这里有个demo大家可以看一下:

Demo for flex on uc

html,body{

padding: 0;

margin: 0;

}

.demo1{

background-color: yellow;

text-align: center;

height: 80px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-align: center;

}

.demo1>div{

background-color: green;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo2{

background-color: yellow;

width: 80px;

height: 200px;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

box-orient: vertical;

-webkit-box-align: center;

}

.demo2>div{

background-color: green;

width: 40px;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

左右排列，上下居中

flex

flex

flex

flex

flex

上下排列，左右居中

flex

flex

flex

flex

flex