<p>能实现等宽弹性列表，需用flex-basis配合calc()设定单个子项宽度（如calc(33.333% - 10.666px)），并结合margin-right与:nth-child(3n)清除末项边距，同时设flex-shrink: 0和box-sizing: border-box确保精度与兼容性。</p>
flex-basis + calc 实现等宽弹性列表，但间距不塌陷
直接说结论：能实现，但必须用 flex-basis 配合 calc() 控制单个子项宽度，并通过 margin 或额外包装层处理间距，否则 flex 容器会把间隙算进剩余空间导致错位。
常见错误现象是：设了 flex-basis: calc(25% - 12px)，看起来对，但实际每行只排下 3 个项——因为 gap 在 Flex 布局中**不被原生支持**（IE 和部分旧版 Safari 完全无效），而 margin 又参与 flex 计算，导致总宽度超限。
- 使用场景：需要响应式 2/3/4 列布局，且列间有固定像素间距（比如 16px），又不想用 CSS Grid
-
calc(25% - 12px)中的12px必须是「单侧间距的一半」，即左右各留 12px，才凑够 24px 间隙；若写成calc(25% - 24px)，实际每项会太窄 - 兼容性上，
calc()在所有现代浏览器都 OK，但 IE9+ 才支持带空格的写法（calc(25% - 12px)），IE8 及更早需回退为固定宽度
为什么不能只靠 flex-basis？gap 属性在 Flex 中不可靠
gap 看起来最干净，但 Flex 布局中它属于「实验性支持」：Chrome 104+、Firefox 103+ 才稳定支持，Safari 14.1+ 开始支持但存在渲染抖动，iOS Safari 14.5 之前完全不识别。一旦失效，整个间距逻辑就崩了。
所以生产环境里，gap 在 Flex 中不能当主力方案，尤其要兼容微信内置浏览器（X5 内核）或企业微信 WebView。
立即学习“前端免费学习笔记（深入）”；
- 如果强行用
display: flex; gap: 16px;，在旧环境里表现为「无间距」，子项挤在一起，无法 fallback -
flex-basis本身只是“建议宽度”，最终尺寸仍受flex-grow/flex-shrink影响；若没显式设flex-shrink: 0，缩放时可能被压缩变形 - 真正安全的做法是：用
margin-right+:nth-child(n)清除最后一项的右距，或用伪元素模拟 gap
推荐写法：calc + margin + nth-child 清除冗余边距
这是目前最可控、可预测、兼容性最好的组合。核心是让每项宽度「预留出右侧间距空间」，再用选择器干掉最后一列的 margin-right，避免换行错位。
.list {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: calc(33.333% - 10.666px); /* 3列，每列间16px，共2个间隙 → 16×2=32px，32÷3≈10.666px */
margin-right: 16px;
flex-shrink: 0;
}
.item:nth-child(3n) {
margin-right: 0;
}- 注意
calc(33.333% - 10.666px)中的循环数必须和:nth-child(3n)一致，否则清除错位 - 百分比用
33.333%而非33.33%，减少浮点误差累积（尤其在小屏下） - 必须加
flex-shrink: 0，否则某些安卓 WebView 下会把项压扁
移动端适配时容易漏掉的两个点
不是所有设备都能按预期换行，尤其当容器有 padding 或父级 font-size 影响 em 类单位时，calc 的结果会偏移。
- 避免在
calc()里混用em或rem，全部用px或%，否则 iOS Safari 15.4 之前有计算 bug - Flex 容器必须设
box-sizing: border-box，否则 padding 会让可用宽度变小，导致最后一列掉行 - 如果列表项内容高度不一致，记得加
align-items: flex-start，不然默认stretch会让短内容也被拉高，视觉错乱
真正麻烦的从来不是写几行 calc，而是不同内核对「百分比减像素」的解析精度差异——有时候差 0.02px 就够让一行多塞下一个项，或者少一个。测的时候别只看 Chrome，真机连 iOS Safari 和 微信安卓版都得过一遍。
