卡片换行整齐需配齐flex-wrap: wrap、gap和子项可控宽度三要素：开启换行开关、用gap替代margin避免错位、设flex: 0 0 200px并加box-sizing: border-box；多行对齐用align-content而非justify-content。
卡片换行不规则，多数不是代码写错了，而是几个关键属性没配齐或配反了。只要把 flex-wrap、gap 和子项宽度控制这三件事理清楚，换行就能自然整齐。
必须开启 flex-wrap: wrap
Flex 容器默认是 flex-wrap: nowrap，所有卡片死扛在一行，撑破容器也不换行。哪怕屏幕只剩 200px 宽，它也硬要把六张卡片挤进去——结果要么溢出，要么被压缩变形。
- 加一句
flex-wrap: wrap，卡片才真正“懂进退”：空间不够就自动折到下一行 - 别只写
display: flex就停手，flex-wrap是换行的开关，缺它不行 - 不需要媒体查询，换行行为由浏览器实时计算触发，响应式天然成立
用 gap 替代 margin 控制间距
很多人给卡片加 margin-right 和 margin-bottom，结果换行后首尾卡片和容器边缘距离不对齐，第二行第一张卡片还多出一截空白——这是 margin 在换行时无法自动规避边缘导致的错位。
- 直接在容器上写
gap: 16px，它只作用于卡片之间，不会影响容器边距 - gap 同时控制行内间隙（列间距）和行间间隙（行间距），比分别设 margin 简洁稳定
- 如果需要不同方向间距，可用
row-gap和column-gap单独设置
子项宽度要可控，避免弹性拉伸干扰换行
卡片宽度如果依赖 flex: 1 或没设限制，在小屏下可能被压缩得极窄；如果设了固定 width 但没配合 box-sizing: border-box，内边距和边框还会额外增加宽度，导致换行点提前或错乱。
- 推荐用
flex: 0 0 200px：不放大、不缩小、基础宽 200px，换行逻辑最清晰 - 加上
box-sizing: border-box，确保 padding 和 border 不撑大卡片实际占位 - 如需响应式缩放，可用
flex: 0 0 calc(33.333% - 16px)配合 gap，实现每行三列且间隙均匀
多行对齐要靠 align-content，不是 justify-content
换行后出现“阶梯状”排列（比如第一行高卡片顶着顶部，第二行矮卡片浮在中间），往往是因为只调了 justify-content，却忽略了多行场景下的垂直分布控制。
-
justify-content只管**每行内部**的水平对齐（如左对齐、居中、两端对齐） -
align-content才管**所有行整体**在容器交叉轴上的分布（如顶部对齐、居中、行间均匀） - 例如想让所有行垂直居中，加
align-content: center；想让行与行之间等距，用space-between
