width不触发换行因flex换行依据是flex-basis而非width；safari对未设flex-basis的项按内容宽判断，易致换行错乱，须用flex: 0 0 calc()明确基准。
Flex 实现自适应卡片网格可行，但必须用 flex-basis 控制换行基准，仅靠 width 或 flex: 1 会失效，尤其在 Safari 中。
为什么 width: calc() 不足以触发正确换行
Flex 换行判断依据是 flex-basis，不是 width。即使你写了 width: calc(33.33% - 20px)，只要没设 flex-basis，Safari 就可能按内容实际宽度（比如图片加载前的 0、加载后的自然宽）做换行，导致第一行卡 4 个、第二行只卡 2 个。
- 务必写
flex: 0 0 calc(33.33% - 20px)，等价于flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.33% - 20px) - 避免只写
flex: 1或flex: 1 1 auto，它们会让卡片拉伸挤压，破坏列数预期 - 如果卡片含异步图片，首次渲染时高度为 0，可能造成换行线错位——加
min-height或aspect-ratio可缓解
flex-wrap: wrap 配合 gap 的实际效果
gap 是现代 Flex 安全设置间距的方式，比用 margin 更可靠：它不参与换行计算，也不触发父容器 overflow，且能自动避开首尾外边距。
- 容器必须声明
display: flex和flex-wrap: wrap，缺一不可 -
gap: 16px会同时作用于行内和行间间距，无需额外处理最后一行对齐问题 - 旧版浏览器（如 IE11）不支持
gap，需回退为margin+nth-child清除逻辑，但当前已极少需要兼容
响应式断点中 calc() 值怎么算才不翻车
每层断点的 calc() 必须与 gap 数值严格匹配，否则多列时总宽度会溢出容器。
- 假设
gap: 20px，三列布局应写flex: 0 0 calc(33.333% - 13.333px)（因为 2 个 gap 共占 40px，均摊到每项是 40px ÷ 3 ≈ 13.333px） - 更稳妥的做法是统一用
gap+min-width组合，例如flex: 0 0 280px; min-width: 280px;，再配合媒体查询切换数值 - 不要在
calc()里混用em或rem，字体缩放会干扰宽度计算，坚持用%和px
真正难调的不是代码量，而是 Safari 对未设 flex-basis 的卡片在 wrap 场景下的换行行为——它不完全遵循规范，且不报错。上线前务必在真机 Safari 上滚动测试多轮，观察卡片是否在不同滚动位置突然重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
