Flex box 行包装在 safari 中不起作用。尝试了多个前缀？

Question

我的 flex box 在 Chrome 中运行得很好，但在 safari 和 firefox 中却不行。我已经为 webkit 尝试了很多不同的前缀。没用:(

我需要对弹性项目做些什么吗？还是只是我的弹性容器有问题？

刚刚注意到有不同的行为取决于“-webkit-flex-flow: row wrap;”是否被注释掉。虽然，无论哪种方式都不是正确的行为。当它没有被评论时，左边一直有一个垂直列。当它被评论时，它只是一行，所有内容都在页面顶部彼此相邻

当“显示：-webkit-box;”时也注意到了在那里，无论是否对 webkit-flex-flow 进行了评论，显示屏都会在列表中显示所有彼此相邻的内容。但如果那不存在，那么当 webkit-flex-flow 存在时，就会有一个垂直列。并且评论的时候有一个行列。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  /*display: -webkit-box;*/
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  flex-flow: row wrap;
  /*-webkit-box-flex-flow: row wrap;*/
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;

  justify-content: space-around;
}

.flex-item {

  padding: 0px;
  min-height: 150px;
  min-width: 150px;
  max-height: 300px;
  max-width: 300px;
  width: 100%;
  height: 100%;
  margin-top: 10px;
  
  line-height: 10px;
  color: white;

}

<div class="flex-container">
	<div class="flex-item">
		<a href="#/thing"><img src="img/thing.svg"></br>thing thing</a>
	</div>
	<div class="flex-item">
		<a href="#/thing"><img src="img/thing.svg"></br>thing/<br>thing</a>
	</div>
	<div class="flex-item">
		<a href="#/thing"><img src="img/thing.svg"></br>thing</a>
	</div>
	<div class="flex-item">
		<a href="#/thing"><img src="img/thing.svg"></br>thing</a>
	</div>
	<div class="flex-item">
		<a href="#/thing"><img src="img/thing.svg"></br>thing</a>
	</div>
	<div class="flex-item">
		<a href="#/thing"><img src="img/thing-thing.svg"></br>thing thing</a>
	</div>
</div>

Answer 1

由于没有

，这不起作用

-webkit-flex: 1 1 15em;
-moz-flex: 1 1 15em;
flex: 1 1 15em;

在 .flex-item 中。

因此为什么它在 chrome 中运行良好，但在 firefox 或 safari 中却不行。我想，Chrome 只是得到了这些东西。

解决另一个问题（有点）的一大好处是，除了移动之外，现在图像会自动调整大小。但是必须稍微调整一下，以使其足够健壮，以适应移动/网络视图之间的差异

Answer 2

我有时会在 Safari 浏览器中将速记代码分成多个作品。

所以，试试以下方法：

-webkit-flex-flow: row;
-webkit-flex-flow: wrap;

代替：

-webkit-flex-flow: row wrp;

祝你好运！