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

火狐：

铬：

标签： htmlcssgoogle-chromefirefoxflexbox

Answer 1

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

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

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

2. 由于默认配置，图像无法缩小到其内容大小min-width（请注意，在这种情况下 usingunset等效于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两个浏览器中的效果也不相同。^解释1有点棘手，但是如果您更改默认对齐方式，您将在 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，我们回到默认行为（保持纵横比）

---

另一种选择

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

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

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