Question

我的弹性框在Chrome中工作得很好，但不是safari和firefox。我为webkit尝试了很多不同的前缀。不起作用:(

我需要对flex项目做些什么吗？或者只是我的flex-container出了问题？

注意到有不同的行为取决于是否＆＃34; -webkit-flex-flow：行换行; ＆＃34;是否已注释掉。虽然，不是正确的行为。当没有评论时，左边有一个垂直列。当它被评论时，它只是一行，页面顶部的所有内容都紧挨着

当＆＃34;显示时，也会注意到：-webkit-box;＆＃34;在那里，无论webkit-flex-flow是否被注释，显示器都会在列表中显示彼此相邻的所有内容。但如果不存在，那么当webkit-flex-flow出现时，就会出现一个垂直列。当它被评论时，有一个行列。

＆＃13;

.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;

}

＆＃13;

<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>

＆＃13;

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;

祝你好运！

Flex盒行换行不适用于safari。试过多个前缀？

2 个答案: