CSS flex-wrap 在 Safari 中无法按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29986668/
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
flex-wrap not working as expected in Safari
提问by Tom Borowski
On the homepage of http://www.shopifyexperte.de/there are two flex-box modules, one under "Kundenstimmen" and one under "Neueste Beitr?ge...". The inner boxes are supposed to wrap when they go below 220px and not grow above 30% width. This works in latest Chrome, FF and Opera (all on Mac), but in Safari 8.0.5 (Mac) and any iOS browser the boxes never form a row even if there's enough room. They always wrap, each one on a row of its own.
在http://www.shopifyexperte.de/的主页上有两个 flex-box 模块，一个在“Kundenstimmen”下，一个在“Neueste Beitr?ge...”下。内盒应该在低于 220 像素时包裹，并且不会超过 30% 的宽度。这适用于最新的 Chrome、FF 和 Opera（都在 Mac 上），但在 Safari 8.0.5 (Mac) 和任何 iOS 浏览器中，即使有足够的空间，框也不会排成一行。他们总是包裹着，每一个都是自己的一排。
The CSS for the container:
容器的 CSS：
.homepage-testimonial-container {
display: flex;
display: -webkit-flex;
-webkit-flex: 1;
flex: 1;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
align-items: flex-start;
margin-top: 1em;
}The CSS for the boxes inside the container:
容器内盒子的 CSS：
.homepage-testimonial {
margin-bottom: 1em;
min-width: 220px;
max-width: 30%;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}If I disable -webkit-flex-wrap (effectively setting it to nowrap), all boxes line up in a row but eventually overflow the container when the browser window gets too narrow.
如果我禁用 -webkit-flex-wrap（有效地将其设置为 nowrap），所有框都会排成一行，但最终会在浏览器窗口变得太窄时溢出容器。
Is this some kind of bug in Safari/Webkit or am I doing something wrong here?
这是 Safari/Webkit 中的某种错误还是我在这里做错了什么？
采纳答案by Joseph Hansen
It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of autoin lines where you say something like -webkit-flex: 1 1 auto;.
这似乎是 Safari 中的一个错误。在一个单独的问题中，我使用 min-width 代替autoin 行进行了测试，其中您说的是-webkit-flex: 1 1 auto;.
This question has some info: https://stackoverflow.com/a/30792851/756329
这个问题有一些信息：https: //stackoverflow.com/a/30792851/756329
回答by socrateisabot
Set child elements like this seems to work for me
像这样设置子元素似乎对我有用
flex: 1 0 auto;
回答by eye-wonder
I had a similar issue in Safari (9.1.3) with the Bootstrap 3 grid system (e.g. col-md-4) in combination with flex. I solved it by setting margin: 0 -1px;on the col items and flex-wrap: wrap;on the wrapper.
我在 Safari (9.1.3) 中使用 Bootstrap 3 网格系统（例如 col-md-4）和 flex 遇到了类似的问题。我通过margin: 0 -1px;在 col 项目和flex-wrap: wrap;包装上设置来解决它。
回答by D3XT3R
I'm using Safari 11.0.1 and the bug persists. I use Bootstrap 3 combined with display: flex on my .row elements. I added following to my css to target the column elements. There seems to be something about the width percentages in Safari that aren't being honored correctly.
我正在使用 Safari 11.0.1 并且错误仍然存在。我将 Bootstrap 3 与 display: flex 结合使用在我的 .row 元素上。我在我的 css 中添加了以下内容以定位列元素。似乎 Safari 中的宽度百分比没有得到正确遵守。
.row [class*=col-]{
margin:0 -.3px;
}
回答by sidstumple
Setting flex-basis: 20emalso works, min-width: 20emdoes not.
设置flex-basis: 20em也行，min-width: 20em不行。
回答by Nick F
This is indeed a Safari bug. The details are available at the excellent flexbugspage, but to quote it:
这确实是一个 Safari 错误。详细信息可在优秀的flexbugs页面上找到，但要引用它：
Safari uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto.
Safari 使用最小/最大宽度/高度声明来实际渲染 flex 项目的大小，但在计算多行 flex 容器的单行上应该有多少项目时，它会忽略这些值。相反，它只是使用项目的 flex-basis 值，或者如果 flex 基础设置为 auto 则使用它的宽度。
So the fix / workaround - as suggested by other answers here - is to set the flex-basisto an explicit width rather than auto.
因此，修复/解决方法 - 正如此处的其他答案所建议的那样 - 是将 设置flex-basis为显式宽度而不是auto.
回答by CS_student
I just ran into this issue again and used 'flex-flow'. Worked like a charm.
我刚刚再次遇到这个问题并使用了“flex-flow”。像魅力一样工作。
.row {
@include flex();
@include flex-wrap();
flex-flow: row;
}
回答by Puneet Sehgal
There are other solutions that work for me.
还有其他对我有用的解决方案。
In the .rowcontainer beforeand afterare gets added with these properties:
在.row容器中before，after并添加了以下属性：
row:before, .row:after {
content: " ";
display: table;
}
so setting up the display: none or display: inlinewill solve the problem or setting up the content: nonewill also solve it.
所以设置display: none or display: inline将解决问题或设置content: none也将解决问题。
.row:before, .row:after {
display: none;
}
or
.row:before, .row:after {
display: inline;
}
or
.row:before, .row:after {
content: none
}
