flex-wrap: wrap 是实现自动换行的关键，不设则子元素强行挤在一行；需配合 gap 或 space-around 实现每行均匀分布，并通过 flex-basis 响应式调整列数，同时控制卡片宽高一致性。
flex-wrap: wrap 是实现自动换行的关键
不设 flex-wrap 时，子元素会强行挤在一行，超出容器也不折行。必须显式设置为 wrap 才能触发换行行为。
常见错误是只写了 display: flex 和 justify-content: space-between，却忘了加 flex-wrap: wrap，结果卡片全堆在首行、溢出隐藏或横向滚动。
-
flex-wrap: wrap：允许换行，新行从主轴起点开始（默认是左→右） -
flex-wrap: wrap-reverse：换行但新行在上一行下方反向排列（慎用，容易视觉错乱） - 配合
align-content: flex-start可避免多行之间额外留白（默认是stretch，会拉高行间距）
justify-content 控制单行内卡片间距，不是“均匀”本身
很多人误以为 justify-content: space-between 能让所有卡片“均匀分布”，其实它只作用于当前行的首尾和间隙——最后一行如果卡片数不足，左右两端会空出大片空白。
真正实现「每行都视觉均匀」，得靠 justify-content: space-around 或更稳妥的 gap（推荐）：
立即学习“前端免费学习笔记（深入）”；
-
justify-content: space-around：每项两侧留等宽间隙，首尾项内边距 = 间隙 / 2 -
gap: 1rem：直接控制项与项之间的固定间距，无视行首尾，语义清晰、行为可预测（现代项目首选） - 避免用
space-evenly：IE 不支持，且在 flex 容器有 padding 时可能产生意外交错
卡片宽度必须可控，否则无法“均匀排列”
flex 项默认不收缩（flex-shrink: 1 但受 min-width 影响），若子元素含不定宽内容（如长文本、图片），会导致卡片宽度不一致，破坏对齐。
关键约束手段：
- 给卡片设
flex: 0 0 calc(33.333% - 1rem)（三列布局，gap: 1rem时） - 或统一用
flex-basis+box-sizing: border-box，防止 padding/border 溢出计算 - 禁用
white-space: nowrap类样式，防止文字撑开卡片 - 图片记得加
max-width: 100%和height: auto
响应式断点要重设 flex-basis，别只靠媒体查询改 justify-content
单纯在小屏下把 justify-content 改成 center 并不能解决换行后卡片挤在一起的问题——核心还是每行放几列。
正确做法是在断点中调整卡片基础宽度：
@media (max-width: 768px) {
.card {
flex: 0 0 calc(50% - 0.75rem);
}
}
@media (max-width: 480px) {
.card {
flex: 0 0 100%;
}
}注意：gap 值保持不变即可复用，不需要在每个断点里重复写；而 flex-basis 必须随列数重新计算，漏掉这个，换行逻辑就失效了。
最易被忽略的是：当卡片内容高度不一致时，即使宽度均分，视觉上也会“错格”。此时需配合 align-items: stretch（默认值）并确保卡片内部高度控制合理，比如用 min-height 或 display: flex; flex-direction: column 约束内容区块。
