Html Flexbox 不适用于 iPad 和 Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33502774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox not working on iPad and Safari
提问by Chriss
I'm using flexbox on a website and it crashes on iPad Air, iPad 3 and Safari PC.
我在网站上使用 flexbox，但它在 iPad Air、iPad 3 和 Safari PC 上崩溃了。
The design and the code is similar to this codepen. http://codepen.io/anon/pen/xwJzEg/
设计和代码类似于这个codepen。 http://codepen.io/anon/pen/xwJzEg/
display: flex;
flex-wrap: wrap;
This is how it looks on those devices where the problem occurs:
这是出现问题的设备上的外观：
Any advice how to workaround this?
任何建议如何解决这个问题？
回答by Michael Benjamin
You may want to consider Safari browser support for flexbox.
您可能需要考虑 Safari 浏览器对 flexbox 的支持。
Although Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.
尽管 Safari 9 支持所有标准的 flex 属性，但对于 Safari 8 及更早版本，您需要使用供应商前缀。
Make this adjustment to your code:
对您的代码进行以下调整：
.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";
}
See flexbox browser support here: http://caniuse.com/#search=flexbox
在此处查看 flexbox 浏览器支持：http://caniuse.com/#search=flexbox
Consider using Autoprefixer.
考虑使用Autoprefixer。
See flexbox code samples with prefixes: The Ultimate Flexbox Cheat Sheet
查看带有前缀的 flexbox 代码示例：The Ultimate Flexbox Cheat Sheet
回答by Andrejs Gubars
I used Autoprefixeras suggested in the answers.
我按照答案中的建议使用了Autoprefixer。
I use gulp to handle this when I write SASS. Here is a guide.
我在编写 SASS 时使用 gulp 来处理这个问题。这是一个指南。
Answers here are suggesting to use a prefixed property before the non prefixed one. I agree with a small correction.
这里的答案建议在非前缀属性之前使用前缀属性。我同意一个小的更正。
.container {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
Ideally, you need to list all of the prefixed properties before you start using the non prefixed ones. @Michael_B answer is not perfect in my opinion.
理想情况下，您需要在开始使用非前缀属性之前列出所有前缀属性。@Michael_B 的答案在我看来并不完美。
I hope people will find this useful.
我希望人们会发现这很有用。
回答by user3487028
Have you tried setting flex values for the first-child and last-child li elements? I've found that iPads can get confused if none of the flex-items in a flex-container have a flex value. For example:
您是否尝试过为 first-child 和 last-child li 元素设置 flex 值？我发现如果 flex-container 中的所有 flex-items 都没有 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;
}
