必须设置 flex-wrap: wrap 才能让商品卡片自动换行；推荐使用 flex: 0 0 200px 替代 width: 200px，并优先用 gap 而非 margin 控制间距。
flex-wrap 怎么让商品卡片自动换行
不设 flex-wrap: wrap，所有商品会强行挤在一行，溢出容器也不折行——这是最常被忽略的起点。Flex 默认是 nowrap，得手动打开换行开关。
实操建议：
- 父容器必须设
display: flex且显式声明flex-wrap: wrap - 别依赖子项的
width自动触发换行；要配合容器宽度和子项基础宽度一起算 - 如果子项用了
flex: 1或flex-grow: 1，它会撑满剩余空间，反而破坏固定宽度布局，此时应禁用伸缩
商品卡片用固定宽度还是 flex-basis
用 width: 200px 看似直接，但和 Flex 的协作逻辑容易打架：当容器变窄，width 会强制裁剪或溢出；而 flex-basis: 200px 是 Flex 布局的“基准尺寸”，配合 flex-shrink: 1 才能自然压缩，更可控。
常见错误现象：
- 设了
width: 200px却发现小屏下卡片重叠或横向滚动 - 没设
flex-shrink: 0，导致卡片在窄屏下被压扁（尤其含图片时失真）
推荐写法：flex: 0 0 200px —— 即不放大、不缩小、基准宽 200px。简洁，意图明确。
间隙（gap）和 margin 混用会出什么问题
gap 是 Flex 和 Grid 原生支持的间距控制，干净、无副作用；而用 margin 给每个商品加右/下边距，极易引发边界溢出、最后一行多出空白、响应式错位等问题。
使用场景差异：
- 现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）直接上
gap: 16px，父容器一行解决所有间隙 - 需兼容旧版 Safari（gap 不生效，得退回到
margin+ 负边距父容器抵消，但复杂度陡增 -
gap不影响元素自身盒模型，margin会参与计算，可能干扰max-width或媒体查询断点判断
为什么 justify-content: space-between 在换行后看起来不对齐
因为 space-between 只对**当前行内**的项目起作用，第二行及之后的行，首尾项仍紧贴容器边缘——不是 bug，是设计如此。你看到的“不整齐”，其实是每行独立对齐的结果。
解决思路取决于真实需求：
- 要真正两端对齐所有行 → 改用
justify-content: space-around或space-evenly，视觉更均衡 - 要保持首行两端对齐、其余行左对齐 → 得放弃
justify-content，改用margin-left: auto+margin-right: auto配合最大列数限制（比如每行最多 4 个，就用max-width控制容器） - 注意：若子项宽度不一致（比如文字长度不同导致高度不同），
align-items: stretch（默认）会让所有卡片等高，可能拉长短内容卡片——此时应设align-items: flex-start
实际布局中，卡片高度不一致比宽度更难处理，flex-wrap 不解决跨行对齐，这点容易被当成 Flex 的缺陷，其实只是用错了预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
