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

查看：12
本文介绍了Firefox 和 Chrome 中 Flexbox 的不同实现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

.r {宽度:100%；高度:自动；最小宽度:未设置；最大宽度:100%；}.容器 {显示:弹性；宽度:600px；}

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

火狐:

Chrome:

解决方案

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

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

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

  2. 由于默认的 min-width缩小超过其内容大小code> 配置(注意使用 unset 相当于initial 在这种情况下所以它在某种程度上没用).所以图像将保持在 600px

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

.r {宽度:100%；/*高度:自动；没用的*/最小宽度:0；最大宽度:100%；}.容器 {显示:弹性；宽度:600px；}

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

chrome 的行为似乎发生了变化，因此在上一个版本中不再需要以下内容

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

.r {宽度:100%；/*高度:自动；没用的*/最小宽度:0；最大宽度:100%；}.容器 {显示:弹性；宽度:600px；对齐项目:flex-start;}

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

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

.r {宽度:100%；高度:658%；/*这里有%的任何值*/最小宽度:0；最大宽度:100%；}.容器 {显示:弹性；宽度:600px；}

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

为什么 Firefox 会这样?

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

<小时>

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

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

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

<小时>

另一种选择

问题是由于使用图像替换元素而产生的问题，其宽度/高度的计算不像其他元素那么简单.

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

.r {宽度:100%；最大宽度:100%；}.容器 {显示:弹性；宽度:600px；}图片{最大宽度:100%；}

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

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:

解决方案

The following code works as expected in Firefox

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

  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

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

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>

the behavior of chrome seems to have changed so the below is no more needed in the last version

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

Why Firefox is behaving like that?

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.

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

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)

Another alternative

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.

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆