如何在flex单行布局中适配不同尺寸的图片？

问题核心错误点 #

• 未覆盖flex项的默认最小宽度规则：flex布局中，img这类替换元素作为flex项时，默认min-width值为auto，对应图片本身的原始宽度，哪怕设置了flex-shrink: 1，图片也不会被收缩到小于自身原始宽度，总宽度超出容器时就会溢出。Firefox对该规范的遵循更严格，因此直接出现溢出表现，Chrome的自定义实现会强制收缩但会破坏图片比例。
• 缺少图片比例保护规则：你没有为图片设置height: auto或object-fit属性约束内容展示逻辑，flex收缩强制修改img元素的宽高比时，图片内容就会被拉伸变形。
• 未设置统一的flex收缩基准：默认flex-basis为auto，也就是图片自身的原始宽度，不同尺寸的图片收缩比例计算逻辑不一致，最终布局会出现不符合预期的偏差。
• justify-content: space-between的作用是分配容器多余空白，当子元素总宽度大于等于容器宽度时该属性完全不生效，也达不到你要的撑满容器效果。

修复后可实现需求的代码 #

<div class="flex-container">
   <img src="image-1" alt="示例图">
   <img src="image-2" alt="示例图">
   ...
   <img src="image-n" alt="示例图">
</div>

<style>
.flex-container {
  display: flex;
  width: 100%; /* 明确占满父容器宽度 */
  gap: 8px; /* 可自定义图片间距，不需要则删除 */
}
.flex-container img {
  flex: 1; /* 等价于 flex-grow:1; flex-shrink:1; flex-basis:0%，所有图片等分容器可用宽度 */
  min-width: 0; /* 覆盖默认最小宽度限制，允许图片收缩到小于原始尺寸 */
  max-height: 120px; /* 可自定义高度上限，也可以设固定height值统一高度 */
  object-fit: contain; /* 图片等比例缩放适配元素尺寸，不会变形，多余区域留空；需要铺满元素则改为object-fit: cover */
}
</style>

内容的提问来源于stack exchange，提问作者Chris Pink