Question

如果这是一个没有文件记录的flexbox错误，或者我只是做错了，有人可以告诉我吗？我在div容器内连续排成了3张图像。这就像人们一样简单。

没有任何超链接，所有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张正确缩小，具体取决于手动最大化拖动浏览器，通过视口。

唯一不会改变形状或大小的图像是带有超链接的图像。所以，我从第一张图片上取下了超链接。并决定将它放在第二个上进行测试，现在第一个图像和第三个图像缩小了。

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

我说错了，如果他们是图像赢了，如果他们有超链接lol会弯曲吗？当然不是这样的情况吧？

Answer 1

问题与超链接无关。您可以将图像包装在任何元素中（尝试span或div），它将与a容器具有相同的效果。

问题是Flex容器的层次结构。

当您将元素设置为display: flex（或inline-flex）时，您将建立一个弹性容器。

只有弹性容器的子级才是弹性项目。子级以外的弹性容器的后代不是弹性项目，也不接受弹性属性。

以下是三个弹性项目：

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

第一个元素中的img不是弹性项目。它由a元素包装，因此是flex项的子项。

由于Flex容器上的两个默认设置，两个img项可能会缩小：

flex-wrap: nowrap ~flex项目被强制保留在一行
flex-shrink: 1〜允许flex项目缩小以防止它们溢出容器

如果您切换到flex-wrap: wrap和/或flex-shrink: 0，img项将不再缩小。

a项目因其他默认设置而缩小：min-width: auto，这意味着灵活项目不能小于其内容的大小。在这种情况下，a项目不能缩小到图像宽度以下。

您可以通过在代码中添加min-width: 0来覆盖此设置。

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

更多信息：

Answer 2

我不知道为什么，但这解决了这个问题。我想知道为什么我无法在任何HTML / CSS文档中找到有关此问题的任何信息。

如果添加以下内容。

<style>

    img {
    max-width: 100%;
    height: auto;
    }
</style>

然后所有3张图像都会完美地闪烁。即使他们有超链接。如果你只设置宽度足够有趣：100％;然后具有超链接的图像保持与图像完全相同的尺寸，并且所有其他没有超链接的图像都吹到容器的100％大小。

我不知道flexbox有这样的规则需要你设置图像最大宽度，以便在项目附加超链接时使项目响应/缩小。

所以，在chrome中尝试过：只有现在带有锚点的图像缩小，其他2个保持相同的大小。 FireFox全部3缩小，但chrome仅缩小图像，并在其周围缠绕超链接。

尝试在其他两个图像周围包装超链接，并且在chrome中，它们都缩小了。

有人可以解释发生了什么吗？如何在超链接上设置max-width：和height：auto？

Answer 3

如果没有看到你的CSS，很难说，但你可能没有选择<a>标签内的图像。如果您更改CSS以选择<a>标记内的图像，它应该可以正常工作。

Answer 4

我添加了完整的工作解决方案。感谢这里的许多人提供各种方法。所以，这适用于任何可能正在挣扎的人。

首先让我们设置风格。

<style>

img {
max-width: 100%;
width: 100%;
min-width: 0;
min-height: 0;
}

</style>

添加 min-width：0; | min-height：0; 似乎有点矫枉过正，但是使用chrome，它显然比将它们设置为auto更好;

由于它使用的是flexbox，我们不会添加通常的宽度：33.33％; ，即使有3张图像也是如此。在flexbox中，这将使它们在100％宽的div内远离它们。

这是我发现的最重要的部分。

您必须在图片上使用宽度：100％，或最大宽度：100％; 否则，（在Chrome上不添加100％宽度或最大值） -width：100％;当您最小化浏览器以测试其响应性时，它不会弯曲/缩小。）

因此，接下来要保持3个图像中的每个图像都具有完美的宽高比，请记住将每个图像包含在其自己的div容器中。否则，他们会缩小，但会像他们一样彼此倾斜。

正如你所看到的那样，第一张图片甚至被包裹在一个超链接中，但由于它在自己的div中，它会缩小并完全平齐并与其他图像内联。这节省了使用额外标记并节省了添加span标记，然后使Flex容器包含超链接。我已经尝试过这两种方法，这是迄今为止比较容易的方法。

我已经为flexbox容器使用了内联样式。 （坏习惯。）

<div style="border: 2px solid red; margin: 0 auto; display: flex; justify-content: center;">

<div>
<a href=""><img src="flash-tooltip.png"></a>
</div>

<div>
<img src="html-tooltip.png">
</div>

<div>
<img src="portables-tooltip.png">
</div>
</div>

请记得关闭最后一个/ div这是真正的问题！

这就是我做到的。在许多浏览器中测试它完美无缺。甚至在手机和平板电脑上。

如果你不喜欢flexbox？您可以使用常规浮动执行相同的操作。 I've included this same method as above, only this time in a float: version.

当容器是超链接时，Flex图像不会因屏幕大小而缩小

4 个答案: