CSS Flex-box 中的 Row Wrap 未在 Safari 中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25360526/
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
Row Wrap in flex-box not wrapping in Safari
提问by Lars Bilharz
A flex container has four children, each with a flex-basis of 25% an a min-width. flex-flow is set to row wrap. Browsers other then Safari handle this as expected: if the min-width is reached, it wraps the the next item to the next row. In Safari it overflow the container.
一个 flex 容器有四个子元素，每个子元素的 flex-basis 为 25% 和 a min-width。flex-flow 设置为行换行。Safari 以外的浏览器会按预期处理此问题：如果达到 min-width，它将下一项包装到下一行。在 Safari 中，它会溢出容器。
See demo here: http://codepen.io/lbilharz/pen/aJbkI
在此处查看演示：http: //codepen.io/lbilharz/pen/aJbkI
JADE
玉
h1 Why this ain't wrappin' in mobile-safari?
.flex
for i in ['one','two','three','four']
.item
h2=i
Stylus
手写笔
.flex
display flex
flex-wrap wrap
flex-direction row
padding 1em
background lightyellow
.item
flex 1 0 25%
padding 1em
box-sizing border-box
min-width 15em
Any ideas?
有任何想法吗？
回答by Joseph Hansen
Per a comment on bugs.webkit.org, it seems the solution is simple!
根据对 bugs.webkit.org的评论，解决方案似乎很简单！
If your style is
如果你的风格是
div.flex {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
}
div.flex .item {
min-width: 15em;
-webkit-flex: 1;
flex: 1;
}
you just need to add more explicitness to your flexdeclaration. In fact, I think only one line needs to change like so
你只需要在你的flex声明中添加更多的明确性。事实上，我认为只有一行需要像这样改变
div.flex {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
}
div.flex .item {
min-width: 15em;
-webkit-flex: 1 1 15em; /* this */
flex: 1;
}
回答by kmgdev
I'm using a max-widthon my flex items, so I was able to solve this by explicitly setting the max-widthwithin the flexproperty:
我max-width在我的 flex 项目上使用了 a ，所以我能够通过max-width在flex属性中显式设置 来解决这个问题：
.wrapper {
display: flex;
flex-flow: row wrap;
}
li {
width: 100%;
max-width: 500px;
flex: 1 1 500px;
}
回答by Prakash Upadhyay
This is a Safari IOS bug. So the fix / workaround is to set the flex-basis to an explicit width rather than auto for child element.
这是一个 Safari IOS 错误。所以修复/解决方法是将 flex-basis 设置为显式宽度，而不是子元素的 auto 。
回答by JoelBonetR
Please, note that not all prefixers work the same way, so there's known issues on every prefixer that puts you in need to manually add some vendor prefix. Don't rely on blind-trusting on prefixers or automated software unless you checked it works hundred percent in your project.
请注意，并非所有前缀的工作方式都相同，因此每个前缀都存在已知问题，需要您手动添加一些供应商前缀。不要依赖于对前缀或自动化软件的盲目信任，除非您检查它在您的项目中 100% 工作。
For detailed flex bugs, please refer:
有关详细的 flex 错误，请参阅：
https://caniuse.com/#feat=flexbox
https://caniuse.com/#feat=flexbox
https://github.com/philipwalton/flexbugs
https://github.com/philipwalton/flexbugs
As Joseph Hansen pointed out, including width property as third param on flex declaration is the desired workaround for flex and it should fix most of issues derived from merging flex with some declarations.
正如 Joseph Hansen 指出的那样，将 width 属性作为 flex 声明的第三个参数是 flex 所需的解决方法，它应该解决由于将 flex 与某些声明合并而产生的大多数问题。
But this doesn't solve all issues on safari, or even other browsers; it sometimes will depend on childrens or some other property; in the example below, you'll see the middle box growing more than usual, even when all three elements are supposed to keep same width ON SAFARI. If you use chrome, it will look pretty nice.
但这并不能解决 safari 甚至其他浏览器上的所有问题；有时取决于孩子或其他一些财产；在下面的示例中，您会看到中间框比平时增长得更多，即使所有三个元素都应该在SAFARI上保持相同的宽度。如果你使用 chrome，它看起来会很漂亮。
This is not a flex issue but a display interpreter one. Simply removing display: inline-table will fix the issue for safari, but, with more child elements, it will make all cards grow in height, so we'll need to fix this other behaviour derived from switching to another display property.
这不是弹性问题，而是显示解释器问题。简单地删除 display: inline-table 将解决 safari 的问题，但是，如果有更多的子元素，它会使所有卡片的高度都增加，因此我们需要修复由于切换到另一个显示属性而产生的其他行为。
.flexrow {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0px -15px;
}
.card-container {
display: inline-table;
}
div.card-container {
-webkit-flex: 0 1 calc(33.3333% - 30px);
flex: 0 1 calc(33.3333% - 30px);
margin: 15px;
}
.card-container {
background:green;
}<div class="flexrow">
<div class="card-container">
<div class="card">
<p class="title">
test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test testtesttest test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test test
</p>
</div>
</div>
</div>this is only an example but i suggest to check every property that have boundaries with flexbox (i.e. display, position and more).
这只是一个例子，但我建议检查每个与 flexbox 有边界的属性（即显示、位置等）。
Here the working example:
这是工作示例：
.flexrow {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0px -15px;
}
.card-container {
// display: inline-table;
}
div.card-container {
-webkit-flex: 0 1 calc(33.3333% - 30px);
flex: 0 1 calc(33.3333% - 30px);
margin: 15px;
}
.card-container {
background:green;
}<div class="flexrow">
<div class="card-container">
<div class="card">
<p class="title">
test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test testtesttest test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test test
</p>
</div>
</div>
</div>回答by ninjaPixel
Some browsers do not fully support all the CSS3 elements. Try this:
有些浏览器并不完全支持所有的 CSS3 元素。尝试这个：
display:-webkit-box;
display:-webkit-flex;
display:-webkit-flexbox;
display:-moz-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
