显示：弯曲；不适用于 iPad（Chrome 和 Safari）答案

【问题标题】：display: flex; doesn't work on iPad (both Chrome and Safari)显示：弯曲；不适用于 iPad（Chrome 和 Safari）
【发布时间】：2016-08-21 00:19:05
【问题描述】：

此代码在计算机上按预期工作，但 在 iPad 版 Chrome 47 和 iPad 版 Safari 上完全无法呈现 display: flex（横向视图，宽度 1024 像素）。

这很奇怪，因为 flex 应该很早就在 Chrome 上得到很好的支持了。

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { flex: 1; background-color: yellow; }

<div id="header">
  <div id="topleft">Topleft</div>
  <div id="topmid">Topmid</div>
  <div id="topright">Topright</div>
</div>

怎么了？

【问题讨论】：

哇...我用flex 测试的例子越多，我看到的失败例子就越多。示例：codepen.io/chriscoyier/pen/qazmI 在装有 Chrome 47 的 iPad mini 上根本无法正确呈现。

标签： ios css google-chrome responsive-design flexbox

【解决方案1】：

如果您的 iPad 运行的不是 iOS 9，您需要将-webkit-flex: 0 0 155px; 添加到#topleft，将-webkit-flex: 0 0 40%; 添加到#topmid，并将-webkit-flex: 1; 添加到#topright。

根据您包含display: -webkit-flex; 做出假设

因此，您的新 CSS 可能如下所示：

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { -webkit-flex: 1; flex: 1; background-color: yellow; }

另外，iPad 上的 Chrome 仍在使用 Safari 引擎...它只是一个 web 视图，因此我们无法获得我们在 Android 设备上获得的所有最新 Chrome 优点。

【讨论】：