结论是用 display: flex + flex-wrap: wrap + gap 是当前最简洁、兼容性够用、维护成本最低的电商产品列表方案，因其无需伪类清除、换行间距一致、响应式列数切换稳定，且比 margin 更可靠、比 grid 更轻量。
直接说结论：用 display: flex + flex-wrap: wrap + gap 是当前最简洁、兼容性够用、维护成本最低的电商产品列表方案，比浮动或 Grid 更轻量，也比手写 margin 更可靠。
为什么不用 margin 做卡片间距？
很多人给每个商品卡片加 margin-right 和 margin-bottom，结果出现两个典型问题：
- 最后一列卡片右边多出空白（
:last-child清除不彻底，尤其动态渲染时容易漏） - 换行后上下行间距和左右间距不一致，视觉割裂
- 响应式切换列数时，
margin计算逻辑要重写，容易出错
改用 gap 后，所有方向的间距自动统一，换行时依然生效，且无需任何伪类清除。
如何控制 PC/平板/手机三端列数？
关键不是死记“每行几个”，而是让卡片宽度随容器弹性缩放：
- 默认（PC）：
.product { flex: 0 0 calc((100% - 3rem) / 4); }—— 减去总gap后均分，留白均匀 - 平板（≤768px）：
@media (max-width: 768px) { .product { flex-basis: calc((100% - 2rem) / 3); } } - 手机（≤480px）：
@media (max-width: 480px) { .product { flex-basis: 100%; } }
注意：这里用 flex-basis 而非 width，因为它尊重 flex-wrap 和剩余空间分配，避免卡片被强行拉宽或压缩。
卡片内部内容怎么垂直居中？
商品卡片里图片、标题、价格、按钮常高度不一，靠 text-align 或 line-height 都不可靠。正确做法是把卡片本身设为 Flex 容器：
.product { display: flex; flex-direction: column; justify-content: space-between; }- 图片用
flex-shrink: 0防止被压缩，文字区域用flex: 1自适应撑高 - 按钮固定在底部，不依赖绝对定位，也不怕内容增减导致错位
这种嵌套 Flex（外层布局 + 内层对齐）是电商卡片最稳的结构，比用 grid 或 position 更易调试。
兼容性与 fallback 怎么处理？
现代浏览器（Chrome 84+/Firefox 67+/Safari 12.1+）原生支持 gap 和 flex-wrap，但 iOS Safari 12 以下仍需注意：
- 若必须支持 iOS 11 及更早版本，
gap替换为margin，并用:nth-child(4n)清除右 margin（PC 端） -
flex-wrap: wrap在老 Android 浏览器中偶有换行错位，可加min-width: 0到卡片防止文本撑破 - 别用
align-content控制多行间距——它在单行时无效，且部分旧引擎解析异常
真正容易被忽略的，是卡片内图片加载失败时的高度塌陷。建议统一设 min-height 或用 aspect-ratio（配合 object-fit: cover），否则 Flex 的交叉轴对齐会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
