flex子项width失效是因为flex-basis优先主导主轴尺寸，正确写法是用flex: 0 0 calc(100%/3)或flex-basis: calc(100%/3)，而非width。
calc() 与 Flex 混用时，width 不生效的常见原因
直接给 flex 子项写 width: calc(100% / 3) 很可能没效果——因为 Flex 默认会忽略 width，转而由 flex-basis 主导尺寸。浏览器看到 width 但不采纳，导致计算结果“被无视”。
真正起作用的是 flex-basis，它才是 Flex 布局中决定初始主轴尺寸的属性。
- 错误写法：
.item { width: calc(100% / 3); }（Flex 下常被覆盖） - 正确写法：
.item { flex-basis: calc(100% / 3); } - 更稳妥写法：
.item { flex: 0 0 calc(100% / 3); }（等价于flex-grow: 0; flex-shrink: 0; flex-basis: calc(...)）
三等分 + 间隙场景下 calc() 的安全写法
想让三个子项等宽、且两两之间有 12px 间隙，不能只靠 flex: 1，否则间隙会挤压内容宽度。必须用 calc() 精确分配可用空间。
假设容器有左右各 16px padding，总间隙为 24px（即两项间 12px × 2），则每个子项宽度应为：calc((100% - 24px - 32px) / 3)。
-
100%是父容器宽度 -
- 24px是两个间隙总和 -
- 32px是左右 padding 总和 - 最终：每个
.item { flex: 0 0 calc((100% - 56px) / 3); }
注意括号必须存在，/ 3 是除以无单位数字，不能写成 / 3px。
calc() 在 flex-direction: column 中的 height 计算陷阱
竖向 Flex 容器里用 height: calc(100vh - 80px) 没问题，但若子项也依赖 calc() 控制高度，容易因父容器未设明确 height 而失效。
- 父容器必须有可解析的高度，比如
height: 100vh或min-height: 100vh - 子项写
flex-basis: calc(100% - 60px)才有效；仅写height会被 Flex 忽略 - 避免嵌套
calc(calc(...))——虽然语法合法，但可读性差、调试困难，多数情况一层足够
兼容性与降级：calc() 不是万能解药
当前主流浏览器对 calc() 支持极好（Can I Use 显示 ≥97%），但仍有两个隐性断点：
- IE11 支持
calc()，但不支持vw/vh与百分比混算，如calc(100vw - 10%)会失败 - 旧版 Safari（≤12.1）在
flex-basis中使用calc()有渲染抖动，建议加will-change: flex-basis缓解 - 降级方案不是“多写一行”，而是结构级兜底：比如用
display: table做 fallback 布局，而非只靠width: 33.33%覆盖
最常被忽略的一点：当 calc 表达式里出现非法单位组合（例如 calc(50% * 2em)），整个声明会被静默丢弃，连 warning 都没有——务必在 DevTools 的 Computed 面板里核对最终生效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
