flex-wrap 在 Safari 中无法按预期工作 [英] flex-wrap not working as expected in Safari

问题描述

http://www.shopifyexperte.de/ 的主页上有两个 flex-box 模块，一个在Kundenstimmen"和Neueste Beiträge..."下的一个.内盒应该在低于 220 像素时包裹，并且不会超过 30% 的宽度.这适用于最新的 Chrome、FF 和 Opera(都在 Mac 上)，但在 Safari 8.0.5 (Mac) 和任何 iOS 浏览器中，即使有足够的空间，这些框也不会排成一行.它们总是包裹起来，每一个都单独排成一行.

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.

容器的 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:

The CSS for the boxes inside the container:

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

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

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.

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

Is this some kind of bug in Safari/Webkit or am I doing something wrong here?

推荐答案

这似乎是 Safari 中的一个错误.在一个单独的问题中，我在你说类似 -webkit-flex: 1 1 auto; 的行中使用 min-width 代替 auto 进行了测试.

It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.

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

这篇关于flex-wrap 在 Safari 中无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！