flex-wrap: wrap 必须显式设置，因默认值为 nowrap；需配合 display: flex 使用，并注意容器宽度、子项 flex-shrink 和 gap 与 box-sizing 协同；移动端推荐用 min-width + flex 替代纯百分比 calc，长文本需加 word-break: break-word。
flex-wrap: wrap 必须显式写，不能靠 display: flex 自动触发
很多人以为加了 display: flex 就能换行，结果子元素死活不折行——根本原因是 flex-wrap 默认是 nowrap，得手动设成 wrap 才生效。
移动端尤其容易踩这个坑：viewport 缺失、父容器没设宽度、子项 flex-shrink: 0 却又没超宽，都会让 flex-wrap: wrap 看似“没用”。
- 必须同时写
display: flex和flex-wrap: wrap，缺一不可 - 给父容器加个临时
border: 1px solid red，确认它实际宽度是否受限（比如没设max-width或没继承父宽） - 检查子项是否意外设置了
flex-shrink: 0；如果总宽度还没撑满容器，浏览器根本不会触发换行
每行固定数量（如4个）时，别硬写 width，用 calc(25% - gap) + box-sizing
想在移动端保证每行刚好4个卡片，直接写 width: 25% 会因 margin/gap 失控；更稳的方式是用 flex-basis 配合 gap 计算。
gap 是现代方案，比手动设 margin-right 干净得多，且自动处理最后一项的多余间距。
- 父容器设
gap: 12px（推荐 8–16px 之间，适配触控） - 子项设
flex: 1 1 calc(25% - 12px)，注意括号和单位不能漏 - 必须加
box-sizing: border-box，否则 padding/border 会额外撑宽 - 避免同时用
gap和子项margin，否则间距翻倍
小屏下换行错乱？优先调 flex-basis 而不是 media query
很多开发者一上来就写 @media (max-width: 768px)，但真正卡住的是 flex-basis 在不同视口下的解析偏差：比如 calc(25% - 12px) 在窄屏下可能算出负值，导致布局崩溃。
更鲁棒的做法是降低对百分比的依赖，改用 min-width + flex 组合。
- 子项用
min-width: 140px（适合手指点击的最小宽度）配合flex: 1 1 auto - 这样在 320px 宽屏上也能自然换为每行 2 个，而不是强行挤 4 个导致文字重叠
- 如果真要精确控制列数，
display: grid比 Flex 更合适（例如grid-template-columns: repeat(autofit, minmax(140px, 1fr))))）
文本内容撑开卡片导致换行失效？break-word 不是可选项
移动端常见问题：一个长 URL 或无空格英文单词把整个卡片拉宽，结果本该换行的项被“卡”在第一行。这不是 flex 的锅，是文本渲染规则。
word-break: break-word 或 overflow-wrap: break-word 必须加在卡片内容层，不能只加在容器上。
- 在卡片内容包裹的
<p></p>或<div> 上加 <code>word-break: break-word - 避免用
white-space: nowrap，除非你明确需要单行截断 - 如果用了
font-size: 1.2em等相对单位，记得同步检查line-height是否足够，否则换行后行高塌陷
实际最难调的从来不是那几行 CSS，而是 flex-basis、容器真实宽度、内容弹性三者之间的实时博弈。改一处，得连着看另外两个是否还 hold 住。
