当容器是超链接时，Flex 图像不会随屏幕尺寸缩小

Question

有人可以告诉我这是否是 Flexbox 的一个未记录的错误，或者我只是做错了？我有 3 个图像在 div 容器内排成一行。这对人们来说很简单。

如果没有任何超链接，所有 3 个图像都会按其应有的方式完美缩小。

<div style="width: 100%; margin: 0 auto; display: flex; justify-content: center;">
  <a href=""><img src="flash-tooltip.png"></a>
  <img src="html-tooltip.png">
  <img src="portables-tooltip.png">
</div>

现在，在所有设备上查看时，3 个图像中只有 2 个会正确缩小，具体取决于通过视口手动最大化拖动浏览器。

唯一不会改变形状或大小的图像是带有超链接的图像。因此，我从第一张图片中删除了超链接。并决定将其放置在第二张图像上进行测试，现在第一张图像和第三张图像缩小得很好。

但是，第二张图像保持完全相同的大小？然后尝试向所有图像添加超链接，但它们都没有更改以匹配屏幕宽度？

如果弹性项目是图像，如果它们有超链接，我说它们不会弯曲，我说错了吗？当然不可能是这样吧？

Answer 1

The problem has nothing to do with hyperlinks. You could wrap the image in any element (try a span or a div) and it will have the same effect as the a container.

The problem is the hierarchical structure of a flex container.

When you set an element to display: flex (or inline-flex) you establish a flex container.

Only the children of a flex container are flex items. Descendants of a flex container beyond the children are not flex items and don't accept flex properties.

Here are the three flex items:

• <a href=""><img src="flash-tooltip.png"></a>
• <img src="html-tooltip.png">
• <img src="portables-tooltip.png">

The img in the first element is not a flex item. It is wrapped by the a element and is therefore a child of a flex item.

The two img items can shrink because of two default settings on a flex container:

1. flex-wrap: nowrap ~ flex items are forced to remain on a single line
2. flex-shrink: 1 ~ flex items are permitted to shrink to prevent them from overflowing the container

If you switch to flex-wrap: wrap and/or flex-shrink: 0 the img items will no longer shrink.

The a item does not shrink because of another default setting: min-width: auto, which means that flex items cannot be smaller than the size of their content. In this case, the a item cannot shrink below the width of the image.

You can override this setting by adding min-width: 0 to your code.

#container {
  display: flex;
}

span {
  min-width: 0;
  display: flex;
}

img {
  min-width: 0;
}

<div id="container">
  <span><img src="http://i.imgur.com/60PVLis.png"></span>
  <img src="http://i.imgur.com/60PVLis.png">
  <img src="http://i.imgur.com/60PVLis.png">
</div>

More information:

• Why don't flex items shrink past content size?
• Proper use of flex properties when nesting flex containers