<p>Flex子项width: calc(100% - 20px)无效，因Flex默认忽略width，优先按flex-basis和flex-grow计算尺寸；需设flex: none或flex: 0 0 auto才能启用width。</p>
Flex子项里写width: calc(100% - 20px)为什么没效果？
因为Flex布局默认忽略width，它优先按flex-basis和flex-grow算尺寸。你写的calc()被flex算法覆盖了，不是函数错了，是属性没被用上。
- 必须显式设
flex: none或flex: 0 0 auto来关掉弹性行为，让width生效 - 如果父容器是
display: flex且没设width（比如只靠内容撑开），那100%基准就是auto，结果可能为0 - 调试时直接看computed样式里的
width值：如果是auto或没显示calc()，说明被flex吞掉了
flex-basis能用calc()吗？怎么写才可靠？
可以，而且这是Flex中用calc()最稳妥的入口。但必须注意：它只在flex-basis里起作用，不能塞进flex简写里——浏览器会直接忽略。
- ✅ 正确：
flex-basis: calc(33.333% - 12px) - ❌ 错误：
flex: 1 1 calc(33.333% - 12px)（旧版Chrome/Safari不认） - 搭配
flex-shrink: 0防压缩，尤其当内容超宽时，否则calc()算出的值会被强行缩小 - 如果要均分带间隙的列，别用
100% / n，写成calc((100% - 24px) / 3)更准（24px是两处margin总和）
为什么calc(100% - 20px)在Flex里有时算出负数？
不是计算错，是100%的基准塌了。Flex子项的100%指父容器的width，而Flex容器默认width: auto，导致百分比无依附。
- 给Flex容器加
width: 100%或max-width: 1200px，提供明确基准 - 避免用
min-width: fit-content这类会让宽度浮动的值，它会让100%失去稳定参考 - 小屏下
calc(100% - 20px)可能算出负值，浏览器会截断为0，建议补min-width: 0兜底 - 用
vw替代%更稳：flex-basis: calc(33.333vw - 12px)，但要注意vw基于视口，不是父容器
用CSS变量配合calc()时最容易踩什么坑？
变量本身不参与运算，只是字符串替换，单位缺失或空格错误会直接让整条声明失效。
立即学习“前端免费学习笔记（深入）”；
- 变量值必须带单位：
--gap: 12px✅，--gap: 12❌（calc(100% - var(--gap))变成calc(100% - 12)，语法错误） - 运算符两侧必须有空格：
calc(100% - var(--gap))✅，calc(100%-var(--gap))❌（部分浏览器静默丢弃） - 别在
flex简写里混用变量：flex: 0 0 var(--sidebar-width)可行，但flex: 0 0 calc(100% - var(--gap))在IE11和旧Safari里挂 - 变量作用域要窄：
.sidebar { --sidebar-width: 240px; }，别全塞:root，多个组件容易互相覆盖
真正难的不是写对calc()表达式，而是确认它运行时有没有拿到正确的基准值——Flex容器的width、子项的flex-basis模式、以及变量是否在正确作用域里被读取，这三个点漏一个，calc()就成摆设。
