flex-wrap: wrap 是卡片自动换行的前提，需配合父容器明确宽度、合理设置 flex-basis 或 gap，并注意浏览器兼容性差异。
flex-wrap 怎么让卡片自动换行不溢出容器
卡片网格在宽度不足时强行挤成一排，是 flex-wrap: nowrap 的默认行为——它根本不会换行，哪怕子项总宽远超父容器。必须显式设为 flex-wrap: wrap，否则 calc() 算再准也没用。
常见错误现象：display: flex 用了，但卡片横向堆满后直接溢出右侧，滚动条出现，或者卡片被压缩变形。
-
flex-wrap: wrap是换行前提，缺它一切响应式都白搭 - 父容器需有明确宽度（比如
width: 100%或max-width），否则 flex 容器可能按内容撑开，失去“换行触发点” - 避免给子项设
flex-shrink: 0或固定width，否则即使能换行，也可能因无法压缩导致单行只容下 1 张卡
calc() 计算卡片宽度时为什么总差几像素
用 calc(25% - 12px) 做四列布局，结果一行只能塞下三张卡——问题常出在边距没被纳入计算，或盒模型理解偏差。
关键点：CSS 中的 margin 不参与 calc() 的百分比基数运算；% 始终基于父容器宽度，而 margin 是额外加上的空间。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
width: calc((100% - 3 * 16px) / 4)（四列、三处间隙，每间隙 16px） - 所有间距（
margin或gap）必须提前预估并从总宽中扣除，不能靠减固定值“蒙” - 如果用
gap，记得它不占子项宽度，但会扩大容器实际占用空间；此时calc()只需算子项自身宽，无需再扣 gap
Flex 卡片网格在 Safari 上错位或换行异常
Safari（尤其旧版）对 flex-basis 和 calc() 的解析更严格，常表现为卡片高度不齐、换行提前或滞后。
根本原因：Safari 对未设 flex-basis 的 flex 项，在 wrap 场景下可能按内容宽度而非 calc() 结果做换行判断。
- 务必给卡片加
flex: 0 0 calc(...)，即flex-grow: 0; flex-shrink: 0; flex-basis: calc(...) - 避免只写
width: calc(...)，因为 width 不影响 flex 换行逻辑，flex-basis 才是依据 - 若卡片含图片或异步内容，高度不固定会导致换行线参差——加
align-items: flex-start或统一最小高度可缓解
用 gap 替代 margin 布局更稳，但要注意兼容性
现代写法倾向用 gap: 16px 配合 flex-wrap，省去手动算 calc()，也规避 margin 折叠和计算误差。
但它不是万能解：IE 完全不支持，旧版 Safari（≤14.1）仅支持 grid-gap，对 flex-gap 支持有限。
- 如需兼容 IE 或老 Safari，必须回退到
margin+calc()方案 - 使用
gap时，卡片无需再设左右 margin，但首尾卡片仍可能贴边——用padding包裹父容器更干净 -
gap对 flex 行内换行的影响是确定的，但若卡片内有display: inline-block元素，可能意外引入空格间隙，需用font-size: 0或注释消除
真正麻烦的不是怎么写，而是不同浏览器对“多大算一行放不下”的判定逻辑差异——哪怕只是小数点后一位的宽度计算误差，就可能让 Safari 多换一次行，Chrome 却不换。实操中建议用 min-width 给卡片兜底，比纯靠 calc() 更抗扰。
