Question

在http://www.shopifyexperte.de/的主页上有两个弹性盒模块，一个在“Kundenstimmen”下，一个在“NeuesteBeiträge......”下。内盒应该在低于220px时包裹并且不超过30％宽度。这适用于最新的Chrome，FF和Opera（全部在Mac上），但在Safari 8.0.5（Mac）和任何iOS浏览器中，即使有足够的空间，盒子也不会形成一排。它们总是包裹着，每一个都在它自己的行上。

容器的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;
}

容器内框的CSS：

.homepage-testimonial {
	margin-bottom: 1em;
	min-width: 220px;
	max-width: 30%;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

如果我禁用-webkit-flex-wrap（有效地将其设置为nowrap），则所有框都排成一行但最终在浏览器窗口变得太窄时溢出容器。

这是Safari / Webkit中的某种错误，还是我在这里做错了什么？

Answer 1

这似乎是Safari中的一个错误。在另一个问题中，我使用最小宽度代替auto进行了测试，其中您说的是-webkit-flex: 1 1 auto;。

这个问题有一些信息：https://stackoverflow.com/a/30792851/756329

Answer 2

设置这样的子元素似乎对我有用

flex: 1 0 auto;

Answer 3

我在Safari（9.1.3）中遇到类似的问题，其中Bootstrap 3网格系统（例如col-md-4）与flex结合使用。我通过在col项目上设置margin: 0 -1px;并在包装器上设置flex-wrap: wrap;来解决它。

Answer 4

设置flex-basis: 20em也有效，min-width: 20em没有。

Answer 5

我正在使用Safari 11.0.1，但错误仍然存在。我使用Bootstrap 3和display：flex在我的.row元素上结合使用。我在我的css中添加了以下内容来定位列元素。似乎有一些关于Safari的宽度百分比没有得到正确认可。

.row [class*=col-]{
    margin:0 -.3px;
}

Answer 6

这确实是一个Safari漏洞。详细信息可在优秀的flexbugs页面上找到，但请引用它：

Safari使用最小/最大宽度/高度声明进行实际渲染 flex项的大小，但在计算时忽略这些值多行flex的单行应该有多少项容器。相反，它只是使用项目的弹性基础值或其值如果flex基础设置为auto，则为width。

因此，修复/解决方法 - 如此处其他答案所示 - 是将flex-basis设置为显式宽度而不是auto。

Answer 7

我只是再次遇到了这个问题，并使用了“ flex-flow”。像魅力一样工作。

.row {
    @include flex();
    @include flex-wrap();
    flex-flow: row;
}

Answer 8

还有其他适用于我的解决方案。

在.row容器before和after中添加了以下属性：

row:before, .row:after {
 content: " ";
 display: table;
}

因此设置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
}

flex-wrap在Safari中没有按预期工作

8 个答案: