Flexbox 不适用于 iPad 和 Safari [重复]

我在网站上使用 Flexbox，但它在 iPad Air、iPad 3 和 Safari PC 上崩溃。

设计和代码与此 codepen 类似。http://codepen.io/anon/pen/xwJzEg/ http://codepen.io/anon/pen/xwJzEg/

display: flex;
flex-wrap: wrap;

This is how it looks on those devices where the problem occurs:

有什么建议如何解决这个问题吗？

您可能需要考虑 Safari 浏览器对 Flexbox 的支持。

尽管 Safari 9 支持所有标准 Flex 属性，但在 Safari 8 及更早版本中，您需要使用供应商前缀。

对您的代码进行此调整：

.container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-flex; /* NEW */
    display: flex;
    -webkit-flex-wrap: wrap; /* NEW */
    flex-wrap: wrap;
    font-family: "Open Sans";
}

请参阅此处的 Flexbox 浏览器支持：http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox

考虑使用自动前缀器 https://autoprefixer.github.io/.

请参阅带有前缀的 Flexbox 代码示例：终极 Flexbox 备忘单 http://www.sketchingwithcss.com/samplechapter/cheatsheet.html