Firefox和Chrome中Flexbox的不同实现 [英] Different implementation of Flexbox in Firefox and Chrome

问题描述

以下代码在Firefox中可以正常工作，但是在Chrome中，图像变得比flex容器大得多.

The following code works as expected in Firefox, but in Chrome, the images become much bigger than the flex container.

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

Firefox :

Chrome :

推荐答案

以下代码在Firefox中可以正常工作

The following code works as expected in Firefox

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

I disagree with this because for me Chrome is behaving as expected for 2 reasons:

1. 将图像的宽度设置为100%，这意味着由600px定义的图像包含块(容器)的100％.因此，每个图像将是600px

1. You set the width of the image to be 100% which means 100% of their containing block (container) that is defined by 600px. So each image will be 600px

由于默认的min-width配置，图像无法缩小到其内容大小(请注意，使用在这种情况下， unset等效于initial 莫名其妙地没用).因此图像将保留在600px

The image cannot shrink past its content size due to the default min-width configuration (note that using unset is equivalent to initial in this case so it's somehow useless). So the image will be kept at 600px

如果添加min-width:0，图片将仅在宽度上缩小:

If you add min-width:0 the image will shrink only in width:

.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中获得预期的结果:

Now if we consider the height you are facing the stretch effect that is also not the same in both browser. It's a bit trikcy to explain¹ but if you change the default alignment you will get the expected result within 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>

或者，如果您使用百分比值更改高度，您将使其失败，并具有所需的功能(这是有点骇人听闻，因为我们正在触发另一个问题来解决实际的问题)

Or if you change the height using percentage value you will make it fail and also have what you want (this is a bit hacky because we are triggering another issue to fix the actual one)

.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配置，并且优先考虑保持比率而不是拉伸效果.

I don't know exactly, but the logical explanation is that Firefox is not considering the default min-width configuration and is giving priority to keeping ratio and not to the stretch effect.

¹ 最初，您的图片定义了容器的高度，因为它们很大(高度约700像素)，此高度由容器使用，然后我们将属性，以便它们在宽度上缩小，并且由于默认对齐方式是拉伸，因此它们将拉伸到容器的高度，该高度最初是由它们自己的初始高度定义的，从而创建此撕裂.

¹ Initially your image are defining the height of the container since they are big (around 700px in height), this height is used by the container then we apply the properties to our image so they shrink in width and since the default alignment is stretch they will stretch to the height of the container that was initially defined by their own intial height creating this rendring.

如果我们取消拉伸效果，则图像会尝试保持其比例，因为我们删除了高度限制.

If we remove the stretch effect, the image will try to keep their ratio since we removed the height constraint.

如果考虑高度的百分比值，则逻辑相同.这将导致auto失败，我们将恢复默认行为(保持宽高比)

Same logic if we consider percentage value for height. This one will fail to auto and we get back to the default behavior (keeping the aspect ratio)

另一种选择

由于使用图像替换了具有固有尺寸的元素而引起的问题，其中宽度/高度的计算不像其他元素那么简单.

The issue arised due to the use of image that are replaced element with intrinsic dimension where the calculation of width/height is not as simple as other element.

为避免这种情况，最好将图像包装在div内，并避免将它们作为弹性物品.

To avoid such behavior, better wrap the image inside a div and avoid having them as flex items.

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

这篇关于Firefox和Chrome中Flexbox的不同实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！