应将Flex属性的可变部分抽成带语义的CSS变量，如--flex-basis，并通过:root定义全局默认值、媒体查询或组件作用域覆盖；禁用flex速记中直接使用var()，改用独立属性或固定模式如flex: 0 0 var(--width)。
Flex属性值写死导致维护困难怎么办
直接用 flex: 1 1 200px 这类硬编码值，改个最小宽度就得全局搜、逐个换。尤其在响应式或主题切换场景下，同一个 flex 行为可能要在多个组件、媒体查询里重复出现。
把可变部分抽成 CSS 变量，让布局逻辑集中可控：
:root {
--flex-growth: 1;
--flex-shrink: 1;
--flex-basis: 200px;
}
.card {
flex: var(--flex-growth) var(--flex-shrink) var(--flex-basis);
}
后续只需改 :root 里的变量，所有用到的地方自动同步。注意：CSS 变量不能直接参与 calc() 中的 flex 缩写解析，所以别写成 flex: var(--flex-value) —— 浏览器不认这个“复合值”。
不同组件需要差异化 Flex 行为怎么复用变量
CSS 变量支持作用域继承，可以按组件层级覆盖，不用堆一堆 data- 属性或 JS 注入：
立即学习“前端免费学习笔记（深入）”；
- 基础卡片统一用
--flex-basis: 240px - 移动端侧边栏改
.sidebar { --flex-basis: 80px; } - 模态框内列表项设
.modal .list-item { --flex-shrink: 0; }
关键点：变量名要带语义，比如 --item-flex-basis 比 --f1 强得多；避免在子元素里重定义 --flex 这种泛化名，容易污染父级。
Flex 缩写中使用 CSS 变量报错 Invalid property value
这是最常踩的坑：CSS 的 flex 是一个速记属性，浏览器在解析时会尝试把整个值当字符串匹配预设语法（如 none、auto、数字+长度），而 var(--x) 返回的是运行时值，无法被提前归类。
正确解法只有两个：
- 拆开用独立属性：
flex-grow、flex-shrink、flex-basis，各自接变量 - 或者用
flex: 0 0 var(--width)这类“固定模式”——前提是三个值类型明确且不会动态混用单位（比如不能让--flex-shrink有时是数字、有时是initial）
别试图用 calc(var(--a) + var(--b)) 拼 flex 值，CSS 不支持这种组合解析。
暗色模式下 Flex 分配比例要动态调整是否可行
可行，但得靠媒体查询配合变量切换，不是靠 JS 监听主题后重设 style：
@media (prefers-color-scheme: dark) {
:root {
--flex-growth: 2;
--flex-basis: 180px;
}
}
@media (prefers-color-scheme: light) {
:root {
--flex-growth: 1;
--flex-basis: 240px;
}
}
注意：Safari 对 @media (prefers-color-scheme) 中变量更新有延迟，如果用户手动切主题（非系统级），需配合 class 切换兜底。另外，flex 的分配行为本身不触发重排，但 basis 改变可能引发内容重流，别在动画帧里高频改这些变量。
真正难的不是定义变量，而是想清楚哪些值该抽象、哪些该保留在具体选择器里——比如 flex-direction 很少需要变量化，而 flex-basis 在栅格系统里几乎必须抽离。
