为什么flexbox项目图片根据其初始大小不同地调整大小？ [英] Why do flexbox item images resize differently according to their initial size?

问题描述

我有四个图片：两个小，两个大（尺寸以html显示）。他们都有他们的img宽度设置为100％，但他们的父div设置为特定的宽度。当我调整浏览器窗口的大小时，较小的图像收缩，较大的图像收缩，而且较大的图像不会立即消失。

我有一个围绕div的红色边框和img 。较小的图像的绿色边框收缩之前较大的。为什么？

http://jsfiddle.net/brcrnj80/6/

  img {
 border：3px solid green; 
 width：100％; 
} 
 
 .item {
 border：1px solid red; 
 max-width：250px; 
 min-width：60px; 
 margin：10px; 
} 
  

感谢

解决方案

tl; dr：项目调整大小不同，因为它们有不同的 flex-basis ，这是基于图像大小，它们开始挠曲（收缩）的值。每个项目都必须收缩，但是较大的项目从较大的起点收缩，所以它们在收缩后仍然较大。 （还有一个后期的算法钳位，以防止它们比它们的 max-width 大;这是为了防止大的项目疯狂 - 但是重要的是，他们从它们的 flex-basis 开始收缩，而 max-width clamp是一个事后想法。）

FIX：如果你给每个flex项目相同的flex- flex-basis：250px （和他们的 max-width 一样），你可能会得到结果，重新寻找。更新小提琴： http://jsfiddle.net/brcrnj80/10/

（如另一个答案所示， flex：1 1 0 （可以更简洁地表示为 flex：1 ）也会工作 - 这将 flex-basis 设置为0，并允许flex项目增长（而不是强制他们

LONGER

说明：会发生以下情况：

1. 默认情况下， flex-basis：auto ，这在这种情况下意味着每个flex项目开始它的图像的固有宽度的flexing。所以你的大图像弹性项目有一个巨大的弹性基础，你的小图像弹性项目有一个小的弹性基础。


2. 我们看看是否flex项' flex-basis 值大于容器。他们是（因为你的一些图像是巨大的）。


3. 我们从 flex-basis 开始缩小每个flex项目公平 ，通过使所有项目适合的任何部分。例如 每个项目会丢失1/4的宽度，例如（如果这恰好是正确的分数，使它们都完全适合容器）。


4. ，我们检查这些暂定项目大小是否违反了项目的 max-width 。在此状态下，您的大图片的弹性内容可能会违反 max-width ，例如即使我们拿走了它们大小的1/4（在我的例子中），它们仍然比它们的 max-width：250px 大得多。对于任何此类违规行为，我们会冻结最大宽度的项目，然后重新开始缩小过程。 （我们对 min-width 违反行为做类似的操作。）


5. 在重新启动的缩小过程中，




因此，如果没有足够的空间让每个人拥有250像素的宽度， ，你的小型flex项目最终不得不做所有的收缩。 （除非我们有足够的约束，大的项目会在第一轮收缩中缩小到小于250px，例如，如果我们将每个项目缩小90％那么小项目也将缩小90％，并且它们将小于它们的 min-width：60px ，并且它们将被冻结在那个大小，





请参阅规范的解析灵活长度部分。




I have four images: two small, two big (dimensions shown in html). They all have their img width set to 100% but their parent div is set to a specific width. When I resize the browser window the smaller images shrink and the larger ones don't, right away.

I have a red border around the divs and green border around the imgs. The smaller images' green borders shrink before the larger ones. Why is that?

http://jsfiddle.net/brcrnj80/6/

img {
  border: 3px solid green;
  width: 100%;
}

.item {
  border: 1px solid red;
  max-width: 250px;
  min-width: 60px;
  margin: 10px;
}

Thanks

解决方案

tl;dr: The items are resizing differently because they have a different flex-basis, which is based on the image size and is the value that they start flexing (shrinking) from. Every item has to shrink, but the larger items shrink from a larger starting-point, so they're still larger after the shrinking. (There's also a late-in-the-algorithm "clamp" to prevent them from being bigger than their max-width; this is what keeps the large items from being crazy-huge in this case. But importantly, they start their shrinking from their flex-basis, and the max-width clamp is an afterthought.)

FIX: If you give each flex item the same flex-basis, e.g. flex-basis:250px (the same as their max-width), you'll probably get the result you're looking for. Updated fiddle: http://jsfiddle.net/brcrnj80/10/

(As noted in another answer, flex: 1 1 0 (which can be expressed more concisely as flex:1) will also work -- that's setting the flex-basis to 0, and allowing the flex items to grow (instead of forcing them to shrink) from there, up to their max-width. Produces the same results, just via a different route.)

LONGER EXPLANATION: Here's what happens:

1. By default, everything has flex-basis:auto, which in this case means that each flex item starts out its flexing at its image's intrinsic width. So your huge-image flex items have a huge flex basis, and your small-image flex items have a small flex basis.
2. We see if the sum of the flex items' flex-basis values are larger than the container. They are (because some of your images are huge). So, we have to shrink things.
3. We shrink each flex item "fairly", starting from its flex-basis, by whatever portion is necessary to make all of the items fit. So e.g. each item loses 1/4 of its width, for example (if that happens to be the right fraction to make them all exactly fit the container).
4. NOW, we check if any of these "tentative" item sizes violate the item's max-width. Your flex items with large images will likely violate their max-width at this state, because e.g. even if we take away 1/4 of their size (in my example), they're still much larger than their max-width:250px. For any such violations, we freeze the item at its max-width, and we restart the shrinking process. (We do something similar for min-width violations.)
5. In the restarted shrinking process, the large images are frozen at 250px-width, and the smaller images are responsible for all of the shrinking.

So if there's not enough space for everyone to have 250px of width, your small flex items end up having to do all of the shrinking. (Unless we're constrained enough that the large items would be shrunk to be less than 250px in the first round of shrinking -- e.g. if we're shrinking each item by 90%, say. Though, then the small items will also be shrunk by 90%, and they'll be less than their min-width:60px, and they'll get frozen at that size and we'll restart the shrinking in the same way that I described above).

See the "Resolving Flexible Lengths" chunk of the spec for more details if you're curious.

这篇关于为什么flexbox项目图片根据其初始大小不同地调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！