Flexbox无法在iPad和Safari上运行

Question

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

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

display: flex;
flex-wrap: wrap;

这就是发生问题的设备的样子：

有关如何解决此问题的任何建议吗？

Answer 1

您可能需要考虑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

考虑使用Autoprefixer。

请参阅前缀为The Ultimate Flexbox Cheat Sheet

的Flexbox代码示例

Answer 2

我在答案中建议使用the Go icmp library。

当我写SASS时，我使用gulp来处理这个问题。这是Autoprefixer。

这里的答案建议在非前缀之前使用前缀属性。我同意一个小小的修正。

.container {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;   
    flex-wrap: wrap;
}

理想情况下，在开始使用非前缀属性之前，需要列出所有前缀属性。 @Michael_B在我看来答案并不完美。

我希望人们会觉得这很有用。

Answer 3

您是否尝试过为first-child和last-child li元素设置flex值？我发现如果flex-container中的flex项没有flex值，iPad就会感到困惑。例如：

.container li:first-child {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}
.container li:nth-child(4) {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}