<p>直接用 calc(25% - 20px) 算不准卡片总宽度，因为25%是相对于父容器的宽度，20px是绝对值，且减去的20px常仅为单侧margin，而多卡片间存在多个间隙；更关键的是flex-basis仅控制内容区宽度，不包含自身margin，需先算清每张卡片实际占有的横向空间再反推flex-basis。</p>
为什么直接用 calc(25% - 20px) 算不准卡片总宽度
因为百分比和像素单位在 calc() 中混用时，浏览器必须对齐计算基准：25% 是相对于父容器宽度，而 20px 是绝对值。但问题不在语法——真正出错的是逻辑：你减的 20px 往往只是单侧 margin，而卡片之间有多个间隙；更关键的是，flex-basis 控制的是「内容区宽度」，不包含自身 margin，所以你得先算清「每张卡片实际占多少横向空间」，再反推它的 flex-basis。
用 CSS 变量统一管理 margin 和列数，再套 calc()
把可变参数抽成变量，避免硬编码、便于后续调整：
:root {
--card-gap: 20px; /* 卡片间水平间距（左右各 10px） */
--card-cols: 4; /* 当前期望列数 */
}
<p>.card {
flex: 0 0 calc((100% - (var(--card-cols) - 1) * var(--card-gap)) / var(--card-cols));
}-
--card-gap必须带单位（px），否则calc()会忽略整条声明 -
(var(--card-cols) - 1)是关键：4 列只有 3 个间隙，不是 4 个 - 如果卡片自身还有
margin（比如margin: 0 10px），那--card-gap就该设为20px（左右各 10px 合计） - 这个公式只适用于
display: flex; flex-wrap: wrap的卡片容器
响应式切换列数时，变量要配合媒体查询重置
单纯改 --card-cols 不会触发重排，必须用媒体查询显式覆盖：
@media (max-width: 768px) {
:root { --card-cols: 2; }
}
@media (max-width: 480px) {
:root { --card-cols: 1; }
}- 不要试图用
clamp()直接驱动--card-cols——CSS 变量不支持动态计算数值类型，clamp(1, 2, 4)返回的是长度值，不能当整数参与乘除 - 所有媒体查询中，
--card-gap建议保持不变，或按比例缩放（如改为12px），避免小屏下间隙突兀变大 - 如果卡片有固定宽高比（如
aspect-ratio: 4/3），列数变化后高度自动适配，无需额外干预
IE11 兼容性兜底：变量失效时 fallback 到固定列数
CSS 变量在 IE11 完全不支持，calc() 里的 var() 会被整个丢弃，导致 flex-basis 回退到初始值（auto），卡片堆成一列。必须提供降级：
立即学习“前端免费学习笔记（深入）”；
.card {
flex: 0 0 25%; /* IE11 及旧浏览器走这里 */
flex: 0 0 calc((100% - (var(--card-cols) - 1) * var(--card-gap)) / var(--card-cols)); /* 现代浏览器覆盖 */
}- 注意写两遍，后写的会覆盖前写的（IE11 忽略不认识的声明）
- 别指望
@supports (color: var(--c))包裹整段——它无法检测变量是否在calc()内生效 - 如果项目仍需支持 IE11，建议放弃动态列数，改用
display: grid+grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，兼容性更好
真正难的不是写对 calc() 表达式，而是确认「哪部分是卡片自己的尺寸，哪部分是它和邻居共用的间隙」——这个边界一旦画错，所有计算都偏移。多数人卡在第一步：没意识到 margin 是卡片之间的“共享资源”，不属于任何一张卡片的 flex-basis 范畴。
