最近开发时发现前端有个页面在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;
}
