用CSS变量统一控制Flex布局属性可提升维护性与响应式能力，但需注意IE兼容性、flex简写中单位要求、justify-content值合法性、align-items依赖父容器高度，以及变量作用域继承问题。
用--gap变量统一控制Flex项目间距
硬编码gap: 20px看似简单，但一旦需要全局调整或响应式切换，就得改多处。用CSS变量能集中管控，且支持calc动态计算。
- 在
:root里定义：--gap: 16px，然后容器直接写gap: var(--gap) - 配合媒体查询可覆盖：
@media (max-width: 768px) { :root { --gap: 12px; } }，无需重写所有gap - 注意：IE完全不支持
gap和CSS变量，若需兼容，得用marginfallback +@supports检测
flex简写中混用var(--basis)要小心单位
flex是flex-grow、flex-shrink、flex-basis三值简写，其中flex-basis必须带单位（如px、rem），不能只传数字。
- ✅ 正确：
flex: 1 1 var(--item-width);，前提是--item-width已定义为300px或20rem - ❌ 错误：
flex: 1 1 calc(var(--item-width) * 1);——calc在flex-basis里可能被某些浏览器解析失败 - 更稳妥的做法：把
flex-basis单独写，比如flex-basis: var(--item-width); flex-grow: 1;
用--align变量动态切换justify-content对齐方式
有些组件需要根据状态（如RTL语言、编辑模式）切换主轴对齐，直接写死justify-content: flex-end不够灵活。
- 定义变量：
--justify: center;，再用justify-content: var(--justify); - JS可动态修改：
document.documentElement.style.setProperty('--justify', 'flex-start'); - ⚠️ 注意：
var(--justify)只能是合法值（如center、space-between），不能是表达式；若值非法，整条声明会被忽略，回退到浏览器默认（flex-start）
避免var()在align-items中导致的垂直居中失效
很多人想用--align-items: center做主题化控制，但在父容器高度未明确时，align-items: center本身就不生效——变量只是放大了这个隐藏问题。
立即学习“前端免费学习笔记（深入）”；
- 根本原因：
align-items依赖交叉轴有“可用空间”，若父容器height为auto，就无空间可居中 - 验证方法：临时加
height: 300px，若此时居中有效，说明是高度缺失，不是变量问题 - 建议：把高度控制也纳入变量体系，例如
--container-height: 100vh，再配合height: var(--container-height)
实际项目里，变量和Flexbox配合最易被忽略的点不在语法，而在变量作用域与继承链的断裂——比如子组件里读不到父组件注入的--gap，除非显式inherit或用:host作用域。这比写错一个flex-direction更难排查。
