Flexbox容器必须设为display: flex且父元素不能塌陷；常见问题包括父容器高度塌陷、flex-wrap未启用导致不换行、误用width而非flex-basis控制列宽、忽略gap兼容性及单列时align-items: stretch引发卡片高度不一致。
Flexbox容器必须设为display: flex且父元素不能塌陷
商品列表最常出问题的地方是容器没撑开高度，导致子项错位或重叠。这不是Flexbox本身的问题，而是父容器在未设置高度或未清除浮动时发生塌陷。务必确认商品列表的直接父元素（比如.product-grid）设置了display: flex，并且没有被其他CSS（如float、position: absolute）干扰布局流。
常见错误现象：flex写了但子项横向挤成一排不换行，或只显示第一行——大概率是父容器宽度不够或flex-wrap没开。
- 用
flex-wrap: wrap允许换行，这是响应式多列布局的基础 - 避免给父容器设固定
height，否则会截断内容 - 如果父容器是
div且内部只有Flex子项，不需要clearfix，但若混有浮动元素就得处理
商品卡片用flex-basis控制列宽，别只依赖width
响应式商品列表的核心是“同一行显示几列”，而width在Flex上下文中容易被忽略或覆盖。真正起作用的是flex-basis——它定义了子项在主轴上的初始尺寸。配合flex-grow: 0和flex-shrink: 0，才能让每个卡片严格按设定比例占位。
例如：想在桌面端一排4个、平板一排3个、手机一排1个，就该这样写：
立即学习“前端免费学习笔记（深入）”；
.product-card {
flex: 0 0 calc(25% - 1rem); /* 桌面：4列，留出gap空间 */
}
<p>@media (max-width: 768px) {
.product-card {
flex: 0 0 calc(33.333% - 0.666rem);
}
}</p><p>@media (max-width: 480px) {
.product-card {
flex: 0 0 100%;
}
}注意calc()里要减去gap均摊后的值，否则最后一列可能被挤到下一行。
用gap替代margin做间距，兼容性要兜底
gap是Flexbox布局中唯一能安全控制子项间隙的属性，它不会影响外边距折叠，也不会触发父容器滚动条异常。但IE完全不支持，Safari 14.1之前对gap在Flex中的支持也不稳定。
实操建议：
- 优先写
gap: 1rem，简洁可靠 - 需要兼容旧版Safari或Edge Legacy时，加一层
margin模拟：margin: 0 0.5rem 1rem 0，再用:nth-child(n)清除每行末尾的右距 - 别用
padding代替gap——它会让卡片内容区变窄，且无法统一控制行列间距
移动端单列时align-items容易让图片高度不一致
当商品卡片变成单列堆叠时，如果卡片内图片尺寸不统一（比如有的图高、有的图宽），配合align-items: stretch（Flex默认值）会导致卡片高度被拉得参差不齐。用户一眼就能看出排版“没对齐”。
解决方法不是强行设height，而是改用align-items: flex-start，让所有卡片顶部对齐，再用object-fit: cover约束图片显示区域：
.product-grid {
display: flex;
flex-direction: column;
align-items: flex-start; /* 关键：取消拉伸 */
}
<p>.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
}这个细节在真实商城项目中高频出现，但多数人会先怀疑图片本身，其实只是align-items在单列场景下的隐式行为在作怪。
