为什么 Flex 容器内的图片没有压缩？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《为什么 Flex 容器内的图片没有压缩？》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

为什么图片作为flex的子元素没有被压缩？

在示例代码中，有一个flex容器 .main-box1，内含多张图片。但是，图片没有被flex container压缩，仍然保持原始大小。这是为什么？

原因：flex子元素的默认最小大小

flex容器的子元素默认具有 min-width 和 min-height 值为 auto。对于图片元素，auto 意味着内容大小或元素本身大小中的较小值。由于图片大小是内容大小，因此图片的最小宽度和高度都是其自身大小，不会被容器压缩。

解决方法：设置最小宽度为0

要使子元素自动缩小，可以将 min-width 设置为0。这告诉浏览器，无论内容大小如何，元素的最小宽度都为0，可以被容器压缩。

修改后的css代码如下：

.main-box1 img,
.main-box2 div {
  min-width: 0;
  width: 100px;
  height: 100px;
}

终于介绍完啦！小伙伴们，这篇关于《为什么 Flex 容器内的图片没有压缩？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！