首页 > 微信学院 > 微信公众平台开发 >

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

2016-03-23

在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。 使用display: flex;的时候需要加上display: -webkit-box; 使用flex: 1;的时候要加上: -webkit-box-flex: 1; -moz-box-fl

在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大家可以看一下
请点击:测试页面






左右排列,上下居中

flex
flex
flex
flex
flex

上下排列,左右居中

flex
flex
flex
flex
flex

相关文章
最新文章
热点推荐