为什么 flexbox item 图像会根据它们的初始大小调整不同的大小? [英] Why do flexbox item images resize differently according to their initial size?

问题描述

我有四个图像:两个小，两个大(尺寸以 html 显示).它们都将 img 宽度设置为 100%，但它们的父 div 设置为特定宽度.当我调整浏览器窗口大小时，较小的图像会立即缩小，而较大的则不会.

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.

我在 div 周围有一个红色边框，在 imgs 周围有一个绿色边框.较小图像的绿色边框先于较大图像缩小.这是为什么?

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

谢谢

推荐答案

tl;dr: 项目调整大小不同，因为它们有不同的 flex-basis，这是基于图像大小和是它们开始弯曲(收缩)的值.每个项目都必须缩小，但较大的项目从更大的起点缩小，因此缩小后它们仍然更大.(还有一个算法后期的钳位"，以防止它们大于它们的 max-width；这就是在这种情况下防止大项目变得疯狂的原因.但是重要的是，他们从他们的flex-basis开始缩小，而max-width限制是事后的想法.)

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:如果你给每个 flex 项目相同的 flex-basis，例如flex-basis:250px(与他们的 max-width 相同)，你可能会得到你想要的结果.更新小提琴:http://jsfiddle.net/brcrnj80/10/

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/

(如另一个答案中所述，flex: 1 1 0(可以更简洁地表示为 flex:1)也可以使用——即设置 flex-basis 到 0，并允许弹性项目从那里增长(而不是强迫他们缩小)，直到他们的最大宽度. 产生相同的结果，只是通过不同的路线.)

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

更长的解释:这是发生了什么:

1. 默认情况下，所有东西都有 flex-basis:auto，在这种情况下，这意味着每个 flex 项目在其图像的固有宽度处开始弯曲.所以你的大图片弹性项目有一个巨大的弹性基础，你的小图片弹性项目有一个小的弹性基础.
2. 我们查看弹性项目的 flex-basis 值的总和是否大于容器.它们是(因为你的一些图像很大).所以，我们必须缩小规模.
3. 我们从flex-basis开始公平地"缩小每个弹性项目，缩小所有项目所需的任何部分.所以例如例如，每个 项目的宽度都会减少 1/4(如果这恰好是使它们完全适合容器的正确分数).
4. 现在，我们检查这些暂定"项目尺寸中的任何一个是否违反了项目的max-width.在这种状态下，带有大图像的弹性项目可能违反它们的max-width，因为例如即使我们去掉它们的 1/4(在我的例子中)，它们仍然比它们的 max-width:250px 大得多.对于任何此类违规，我们冻结项目在其最大宽度，然后重新开始缩小过程.(我们对 min-width 违规做了类似的处理.)
5. 在重新开始的收缩过程中，大图像被冻结在 250 像素宽度，较小的图像负责所有的收缩.

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.

因此，如果没有足够的空间让每个人都拥有 250 像素的宽度，那么您的小型 flex 项目最终不得不进行所有收缩.(除非我们受到足够的限制，使得大项目在第一轮收缩中缩小小于 250 像素——例如，如果我们将每个项目缩小 90%，比如说.虽然，那么小项目也将缩小 90%，并且它们将小于它们的 min-width:60px，并且它们将被冻结在那个大小，我们将重新开始缩小和我上面描述的一样).

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 item 图像会根据它们的初始大小调整不同的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！