本文详解如何通过 `min-width: 0` 突破图片默认最小尺寸限制，配合 `flex` 布局实现多图等比压缩填充固定宽度容器，避免换行且保持宽高比。
在使用 Flexbox 布局时，若将多张固定尺寸（如 200×200px）的 直接作为子元素放入一个宽度受限（如 max-width: 600px）的容器中，浏览器默认不会缩小图片——即使总原始宽度（6 × 200 = 1200px）远超父容器，Flex 项仍会“卡住”在内容固有尺寸，导致溢出或布局崩溃。
根本原因在于：HTML 图片（）是「置换元素」（replaced element），其默认 min-width 和 min-height 计算值为 auto，而 CSS 规范规定 min-width: auto 在 Flex 上下文中等效于「内容固有宽度」（即图片原始宽度）。这意味着即便你设置了 width: 200px，Flex 依然拒绝将其压缩到小于 200px —— 除非显式覆盖该最小约束。
✅ 正确解法：为图片设置 min-width: 0（或 min-width: auto 不起作用时，min-width: 0 是可靠方案）：
.stack {
display: flex;
max-width: 600px;
gap: 4px; /* 可选：添加间距 */
border: 1px solid gold;
}
.stack img {
min-width: 0; /* 关键！解除默认最小宽度锁定 */
width: 100%; /* 让宽度由 Flex 分配决定 */
height: auto; /* 保持宽高比 */
flex: 1; /* 均分可用空间（可选，更可控） */
}? flex: 1 等价于 flex: 1 1 0，即 flex-grow: 1, flex-shrink: 1, flex-basis: 0。配合 min-width: 0，浏览器将忽略原始尺寸，基于 flex-basis: 0 从零开始按比例分配空间，从而实现真正响应式压缩。
完整工作示例：
@@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@
⚠️ 注意事项：
- ❌ 不要仅依赖 width: 100% 或 max-width：若不设 min-width: 0，width: 100% 在 Flex 中可能被忽略；
- ✅ 推荐组合：min-width: 0 + flex: 1 + height: auto，简洁鲁棒；
- ? 响应式增强：可结合媒体查询，在小屏下调用 flex-wrap: wrap 作为降级策略；
- ? 调试技巧：在浏览器开发者工具中检查元素 computed 样式，确认 min-width 是否已生效为 0px。
总结：min-width: 0 是解锁 Flex 子项（尤其是图片、iframe 等置换元素）自由缩放能力的「钥匙」。它主动放弃对内容固有尺寸的保护，使 Flex 的 flex-shrink 机制得以真正生效，是现代响应式图片布局中不可或缺的基础技巧。
