<p>flex-basis直接使用CSS变量（如var(--width, 50%)）会失效，因变量值为字符串且无上下文，浏览器无法解析百分比单位，需用calc(var(--width) * 1)或calc(var(--width) - 0px)触发单位解析。</p>
flex-basis 用 CSS 变量时，浏览器不识别百分比单位
直接写 flex-basis: var(--width, 50%) 在多数浏览器里会失效——因为 CSS 变量值是字符串，flex-basis 遇到非数值单位（如 %、em）且无上下文时，会当成无效值回退到 auto。你看到的“错乱”，其实是宽度回归内容宽度，而非你预期的百分比。
必须用 calc() 包一层才能让单位生效：
--width: 50%; flex-basis: calc(var(--width) * 1); /* ✅ 触发单位解析 */ /* 或更稳妥 */ flex-basis: calc(var(--width) - 0px);
- 只写
var(--width)+ 百分比，在 Chrome 128+、Firefox 125+、Safari 17.6+ 均不工作 -
calc(var(--x) + 0%)不行，加法操作符不触发单位推导 - 如果变量存的是像素值（如
--width: 200px），可直接用：flex-basis: var(--width)
变量作用域导致父容器宽度未计算，flex-basis 百分比无参照
Flex 子项的 flex-basis: var(--w) 是百分比时，需要父容器有明确宽度（比如 width: 100% 或固定值）。但若父容器本身宽度来自另一个 CSS 变量（如 width: var(--container-width)），而该变量又没在祖先链上被赋值，那子项的百分比就失去计算基准——结果是所有子项按内容宽渲染，看起来“错乱”。
检查方式：打开开发者工具，看父容器的 Computed width 是否为具体数值（如 375px），而不是 auto 或 unset。
立即学习“前端免费学习笔记（深入）”；
- 别在 :root 里定义
--container-width却忘了在组件级 scope 里重设 - 使用
inline style动态注入变量时，注意它不会触发父容器重排，可能导致 flex-basis 计算时机错误 - 响应式场景下，媒体查询中改了父容器变量但没同步更新子项
flex-basis变量，也会断层
flex-shrink: 0 没配对 flex-basis，变量值被忽略
只写 flex-shrink: 0; flex-basis: var(--w) 看似合理，但如果 --w 解析失败（比如为空或非法值），浏览器会把整个 flex-basis 当成无效，最终回退到 auto。而 flex-shrink: 0 只阻止压缩，并不保证宽度落地——它只是“不缩”，不是“一定按你写的来”。
真正兜底的写法是用 flex 简写，强制覆盖默认行为：
--w: 30%; flex: 0 0 calc(var(--w) * 1); /* ✅ 三值齐全，且 calc 保单位 */
- 避免拆开写
flex-shrink和flex-basis，变量一挂，整条逻辑就断 - IE11 不支持
var()在flex简写中，如需兼容，得用 JS 注入或预编译替换 - 某些构建工具（如 PostCSS 插件）会提前展开变量，但若没配好
calc()处理，也可能产出无效 CSS
iOS Safari 对变量 + flex 的双重解析延迟
iOS Safari（尤其是 17.5+）在首次渲染时，对含变量的 flex-basis 有微小延迟：先按 auto 渲染一帧，再重算。若父容器高度/宽度靠 JS 动态撑开，或字体加载未完成，就会出现短暂“错乱”——按钮忽宽忽窄、卡片错位。
这不是 bug，是 Safari 的样式解析 pipeline 分阶段导致的。临时缓解只能靠降级：
- 对关键布局元素，放弃变量，改用媒体查询内联值：
@media (min-width: 768px) { .item { flex-basis: 33.33%; } } - 加
min-width: 1px到按钮等表单控件，防止 Safari 把flex-basis: 0解析为空后启用min-content保护 - 避免在
::before/::after伪元素里用变量控制 flex-basis——伪元素不继承变量作用域，且 iOS 下解析更不稳定
变量本身没问题，错乱永远发生在「变量值 → 单位解析 → 父宽参照 → flex 分配」这条链路上的某一处断裂。最常被忽略的是：你以为传进去的是 50%，其实浏览器拿到的是字符串 "50%"，而它不会主动猜你要不要这个百分比。
