Flex布局才是真·等间距解法，靠justify-content: space-between或space-around由浏览器自动分摊空白，需配display: flex、明确宽度及flex-wrap: wrap，并用object-fit或容器裁切统一图片尺寸以确保视觉等距。
Flex布局让图片列表自动等间距，不用算margin
绝对定位写图片列表，等于主动放弃响应式——每个left值都要手动算，屏幕一变就错位。Flex才是真·等间距解法，靠justify-content: space-between或space-around就能让浏览器自己分摊空白。
常见错误是只加了display: flex，却忘了父容器有固定宽度或flex-wrap: wrap没配对，导致图片挤成一行溢出。另外，space-between两端不留空，space-around每项两侧留等量空，选哪个取决于设计稿的边距要求。
- 图片外层容器必须设
display: flex且有明确宽度（比如width: 100%或max-width） - 多行显示要加
flex-wrap: wrap，否则justify-content只在单行生效 - 避免给图片设
width: 100%又同时设flex: 1，会触发尺寸冲突，优先用flex: 0 0 auto保原始宽高
图片宽高不一致时，space-between会露馅
当列表里有横图、竖图、正方形混排，justify-content: space-between只管水平间距，不管高度对齐——结果就是底部参差不齐，视觉上“不等距”。这时候得靠align-items: flex-start统一顶部对齐，再配合height或object-fit控图。
更稳妥的做法是给每张图包一层div容器，设固定高宽+overflow: hidden，再用object-fit: cover裁切，这样无论原图比例如何，容器尺寸都一致，space-between才能真正“等距”。
- 别依赖图片自身
height，不同设备加载时机不同，容易闪动错位 -
object-fit: cover比contain更适合列表场景，能保证填满且比例不失真 - 如果必须保留原始比例，就用
aspect-ratio（现代浏览器支持），配合width: 100%，比JS计算安全得多
IE11下flex gap失效，space-between是唯一靠谱选项
gap属性在IE11完全不认，而space-between从IE10起就支持。所以只要目标用户还包含IE11，就别碰gap——它看着简洁，实则直接白屏或堆叠。
另一个坑是space-around在旧版Safari（≤9）里行为异常，左右边距比中间大一倍，这时候宁可用space-between + 伪元素补两端空白，也别赌兼容性。
- 检查Can I Use数据：IE11支持
justify-content但不支持gap，别被现代写法带偏 - 用Autoprefixer时确认已开启
flexbox: 'no-2009'，避免生成过时的display: -ms-flexbox - 如果项目已用PostCSS，加
postcss-flexbugs-fixes插件，能自动修IE下flex-wrap和min-width的bug
用margin模拟gap时，:nth-child容易漏掉最后一行
有人为兼容老浏览器，用margin-right给每项加右空，再用:nth-child(3n)把最后一列margin-right清零。问题在于：Flex换行后，:nth-child仍按HTML顺序计数，不是按视觉行计数——结果就是第二行第三张图也被清了右边距，实际多出空白。
真正可靠的方式是用margin-inline-end配合flex-wrap，或者老老实实用space-between，别硬套选择器逻辑。
-
:nth-child无法感知Flex换行，永远按DOM顺序匹配，这点和Grid的:nth-of-type完全不同 - 若坚持用margin，改用
margin-inline-end: 1rem+margin-inline-start: 0，再靠justify-content微调，比纯选择器稳 - 移动端小屏下列数变少，
nth-child(3n)规则直接失效，必须配合媒体查询重置
事情说清了就结束。等间距这事，核心不是“怎么摆”，而是“谁来算空”——交给Flex，就别再自己用JS或margin掰扯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
