最近发现前端有一个在iphone6上布局损坏的页面。 发现是因为flex布局的不兼容性。
我在网上搜索了相关资料，css的flex收到了版本更新，我们现在技术人员写了flex布局，都是display: flex； 是这样写的。 确实如此。 这是现在的标准版本。 但是，也有旧版本。 display :盒； 然后，显示： flex盒； 出现了兼容性问题。
人工智能
从2.3开始支持旧版本的display:-webkit-box；
4.4开始支持标准版本的display: flex；
IOS
6.1开始支持早期版本的display:-webkit-box；
7.1开始支持标准版本的display: flex；
电脑
ie10已开始支持，但ie10的格式为-ms。
看了这个，基本上知道了display: flex； 在ios7.1发行版之前会坏。
解决方案：
为了向后兼容，将旧版本的写法置于下方，如下所示。
. box {
display:-webkit-flex；
display :闪存；
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%。