css - 为什么 flexbox 元素图像会根据其初始大小调整不同的大小？

Question

我有四张图片:两张小的，两张大的(尺寸以 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;
}

谢谢

Answer 1

tl;dr:元素调整大小不同，因为它们具有不同的 flex-basis，它基于图像大小并且是它们开始 flex (收缩)的值。每个元素都要缩小，但较大的元素从较大的起点收缩，所以缩小后它们仍然较大。 (还有一个后期算法“钳制”来防止它们大于它们的 max-width ；在这种情况下，这就是防止大元素变得疯狂巨大的原因。但是重要的是，它们从它们的 flex-basis 开始收缩，max-width 钳位是事后才想到的。)

修复:如果您为每个 flex 元素提供相同的 flex 基础，例如flex-basis:250px(与它们的 max-width 相同)，您可能会得到想要的结果。更新 fiddle :http://jsfiddle.net/brcrnj80/10/

(如另一个答案所述，flex: 1 1 0(可以更简洁地表示为 flex:1)也将起作用——这就是设置 flex-basis 到 0，并允许 flex 元素从那里增长(而不是强制它们收缩)，直到它们的最大宽度. 产生相同的结果，只是通过不同的路径。)

更长的解释:这是发生的事情:

1. 默认情况下，所有内容都有 flex-basis:auto，在这种情况下，这意味着每个 flex 元素都以其图像的固有宽度开始 flex 。因此，您的大图像 flex 元素具有巨大的 flex 基础，而您的小图像 flex 元素具有较小的 flex 基础。
2. 我们查看 flex 元素的 flex-basis 值的总和是否大于容器。他们是(因为你的一些图片很大)。所以，我们必须缩小范围。
3. 我们“公平地”收缩每个 flex 元素，从其 flex-basis 开始，缩小所有元素所需的任何部分。所以例如例如，每个 元素都会失去其宽度的 1/4(如果这恰好是使它们完全适合容器的正确部分)。
4. 现在，我们检查这些“暂定”元素尺寸是否违反了元素的 max-width。带有大图像的 flex 元素很可能在此状态下违反它们的max-width，因为例如即使我们去掉它们大小的 1/4(在我的示例中)，它们仍然比它们的 max-width:250px 大得多。对于任何此类违规行为，我们将元素卡住在其最大宽度处，然后重新启动收缩过程。 (我们对 min-width 违规做类似的事情。)
5. 在重新启动的收缩过程中，大图像卡住在 250 像素宽度，较小的图像负责所有收缩。

因此，如果没有足够的空间让每个人都拥有 250px 的宽度，那么您的小 flex 元素最终不得不完成所有的收缩。 (除非我们受到足够的限制，以至于在第一轮缩小中大元素将缩小到小于 250 像素 —— 例如，如果我们将每个元素缩小 90%，比如说。虽然，然后小元素也将缩小 90%，它们将小于它们的 min-width:60px，它们将卡住在该大小，我们将重新开始缩小与我上面描述的方式相同)。

参见 the "Resolving Flexible Lengths" chunk of the spec如果您好奇，可以了解更多详情。