Firefox 和 Chrome 中 Flexbox 的不同实现

Question

以下代码在 Firefox 中按预期工作，但在 Chrome 中，图像变得比 flex 容器大得多。

 .r { width: 100%; height: auto; min-width: unset; max-width: 100%; } .container { display: flex; width: 600px; }

 <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>

火狐：

铬：

Answer 1

以下代码在 Firefox 中按预期工作

我不同意这一点，因为对我来说，Chrome 的行为符合预期有两个原因：

1. 您将图像的宽度设置为100% ，这意味着600px定义的包含块（容器）的 100%。 所以每张图片都是600px

2. 由于默认的min-width配置，图像不能缩小到其内容大小（请注意，在这种情况下使用unset等效于initial所以它在某种程度上是无用的）。 所以图像将保持在600px

如果添加min-width:0图像只会缩小宽度：

 .r { width: 100%; /*height: auto; useless */ min-width: 0; max-width: 100%; } .container { display: flex; width: 600px; }

 <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>

chrome 的行为似乎已经改变，因此在上一个版本中不再需要以下内容

现在，如果我们考虑您所面临的 stretch效果的高度，这在两个浏览器中也不相同。 解释 ¹有点棘手，但是如果您更改默认对齐方式，您将在 chrome 中获得预期的结果：

 
   
   
    
    .r { width: 100%; /*height: auto; useless */ min-width: 0; max-width: 100%; } .container { display: flex; width: 600px; align-items:flex-start; }
   
   

 
   
   
    
    <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>
   
   

或者，如果您使用百分比值更改高度， 您将使其失败并获得您想要的（这有点 hacky，因为我们正在触发另一个问题来修复实际问题）

 
   
   
    
    .r { width: 100%; height:658%; /*any value here with %*/ min-width: 0; max-width: 100%; } .container { display: flex; width: 600px; }
   
   

 
   
   
    
    <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>
   
   

为什么 Firefox 会有这样的行为？

我不太清楚，但合乎逻辑的解释是 Firefox 没有考虑默认的min-width配置，而是优先考虑保持比例而不是拉伸效果。

---

¹最初，您的图像定义了容器的高度，因为它们很大（大约 700 像素的高度），这个高度由容器使用，然后我们将属性应用于我们的图像，因此它们的宽度会缩小，并且由于默认对齐方式是拉伸它们将拉伸到最初由它们自己的初始高度定义的容器的高度，从而创建此渲染。

如果我们移除拉伸效果，图像 将尝试保持它们的比例，因为我们移除了高度约束。

如果我们考虑高度的百分比值，则相同的逻辑。 这一个将无法auto ，我们回到默认行为（保持纵横比）

---

另一种选择

该问题是由于使用图像替换元素而产生的，这些元素具有固有尺寸，其中宽度/高度的计算不像其他元素那么简单。

为避免这种行为，最好将图像包装在div中，并避免将它们作为弹性项目。

 .r { width: 100%; max-width: 100%; } .container { display: flex; width: 600px; } img { max-width: 100%; }

 <div class="container"> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> </div>

Answer 2

@TheRuler，最好的解决方案是将图像标签包装在 div 或 span 中，以按照 Firefox 呈现图像。 如果您将图像包装在 div 或 span 中，Firefox 也可以正常工作。

现在你可以问我为什么这是正确的。

基本上 display flex 附加了默认值，它们是：

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto /* Shorthand */

现在，对于 Firefox 和 Chrome，默认值是相同的。 但是两个浏览器中的渲染仍然不同，特别是在图像作为 flex child 的情况下。

现在谁是正确的值得商榷，谁正确地遵循了指导方针也是值得商榷的。

如果你看一下 flex 的规范，它会说，flex 规则应该优先于 CSS 的宽度和高度属性。 所以在这种情况下，Firefox 正在缩小图像的大小以使其适合 600px 父级。

现在如果你看到这个例子，

.container { display: flex; flex-direction: column;}
.container > div { flex: 1; height: 300px;}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

因此，如果您在两个浏览器中都看到此代码，您将看到不同之处。 Chrome 重视 flex 子项的 height 属性，而 Firefox 不重视它。 图像高度和图像宽度也是如此。 铬不占高度。

所以这两个浏览器都有自己的实现，在这种情况下不匹配，谁是正确的存在争议。

因此，将它们包装在 span 或 div 中，使其在两个浏览器中都可以正常工作，这应该是正确的答案，没有 hack。 其他解决方案将解决问题，但它们是解决问题的一种技巧。

如果你得到它请告诉我谢谢

Answer 3

感谢@TemaniAfif，他引导我朝着正确的方向前进，我想出了这个：

 .r { width: 100%; height: 100%; min-width: 0px; max-width: 100%; } .container { display: flex; width: 600px; }

 <div class="container"> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> </div>