html flex兼容性,【前端】css flex的浏览器兼容问题

最近开发时发现前端有个页面在iphone6上布局坏掉了。一看发现是flex布局不兼容产生的。

上网搜索了有关资料，发现css 的 flex 经历了版本的更新，我们现在技术人员写flex布局，都是display: flex;这样写的，确实没错，这是现在的标准版本。但还有个旧版本：display: box; 以及还有个过渡版本：display: flex box; 从而产生了兼容问题。

Android

2.3 开始就支持旧版本display:-webkit-box;

4.4 开始支持标准版本display: flex;

IOS

6.1 开始支持旧版本display:-webkit-box;

7.1 开始支持标准版本display: flex;

PC

ie10开始支持，但是IE10的是-ms形式的。

看到这，基本上知道了display: flex;在ios7.1版本之前都会坏掉。

解决办法：

按照向下兼容，把旧版本的写法放在下面，那么：

.box {

display:-webkit-flex;

display:flex;

display:-webkit-box;

display:-moz-box;

display:-ms-flexbox;

}

.flex1 {

-webkit-flex: 1;

-ms-flex: 1

flex: 1;

-webkit-box-flex: 1

-moz-box-flex: 1;

}

注意：这里要记得，布局内的各个flex1，要给出一个width。比如，你有两个flex1，想各占box的一半，那就width: 50%; 若有三个，想一个占50%,两个占25%,也是可以的。