如何在HTML/CSS中让图片列表直线对齐并设置合理间距？

我看了你的代码和需求，问题出在flex布局的默认行为上——flex项目（也就是你的图片）默认会开启flex-shrink: 1，当容器空间不足时会自动收缩尺寸，这就是你看到图片被压缩的原因。只需要调整两个关键点就能实现你要的效果：

修改后的CSS代码 #

.images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 用gap控制图片间的间距，数值可以根据需求调整 */
  flex-wrap: wrap; /* 可选：小屏幕下自动换行，避免横向溢出 */
}

.images img {
  flex-shrink: 0; /* 核心：阻止图片被flex容器压缩 */
}

代码说明 #

1. flex-shrink: 0：这是解决图片收缩的关键，它告诉flex容器不要压缩这个项目，保持图片原本的尺寸（你在img标签里设置的width/height）。
2. gap：相比给每个图片加左右padding，用flex容器的gap属性控制间距更合理，它只会在图片之间产生间距，不会在容器的左右两端留下多余的空白。如果你习惯用百分比，也可以改成gap: 2%，但固定像素值在不同屏幕下的表现更稳定。
3. flex-wrap: wrap：这是一个优化项，当屏幕宽度不足以容纳所有图片时，图片会自动换行，避免出现横向滚动条，提升移动端体验。

替换你原来的CSS代码后，图片就能保持原有尺寸，横向居中排列且间距均匀，和你截图里的效果一致啦。

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