flex-basis 动态修改无效的主因是 flex 简写（如 flex: 1）会重置 flex-basis 为 0%，需显式写为 flex: 0 1 auto；直接改 style.flexBasis 有效但易覆盖内联样式，用 CSS 变量需确保 CSS 中用 var() 接入，单位推荐 px 或 % 需匹配布局上下文，框架中须合并原始样式避免丢失属性。
flex-basis 动态修改为什么没反应？
直接改 style.flexBasis 或用 element.style.setProperty('--flex-basis', '200px') 通常无效——因为 flex-basis 是原生 CSS 属性，不是 CSS 变量；而 --flex-basis 是自定义变量，必须在 CSS 里显式用 var(--flex-basis) 接入，否则 JS 改了也白改。
- 常见错误现象：
el.style.flexBasis = '300px'看似执行成功，但元素尺寸没变，尤其在已有flex: 1或flex: 0 1 auto的情况下，flex-basis被重置逻辑覆盖 - 真正起效的前提：元素的
flex值不能是简写形式flex: 1这类（它会把flex-basis设为0%），建议显式写成flex: 0 1 auto或flex: 0 1 content - 如果用 CSS 变量控制，CSS 中必须有对应声明，比如：
section { flex-basis: var(--flex-basis, auto); }
JS 改 flexBasis 的三种可靠写法
优先级从高到低：内联 style > CSS 变量 > 外部 class。实际项目中推荐组合使用——用变量兜底，用内联强制覆盖。
- 直接操作
style.flexBasis（最直接）：el.style.flexBasis = '240px'; // 注意单位不能省
适用于单次、确定性更新；但多次调用易覆盖其他内联样式 - 通过 CSS 变量 +
setProperty（适合批量/主题化）：document.documentElement.style.setProperty('--flex-basis', '240px');需确保根元素或父容器已声明该变量，且子元素 CSS 正确引用 - 切换预设 class（适合有限档位）：
el.classList.replace('basis-sm', 'basis-lg');CSS 中定义.basis-sm { flex-basis: 120px; }，避免 JS 拼字符串，更易维护
flex-basis 单位选 px 还是 %？
取决于布局上下文。用错单位会导致响应失效或计算冲突。
-
px：适合固定宽度场景，比如侧边栏收缩/展开；但嵌套在百分比容器中时，可能和父容器flex-direction: column下的可用高度不匹配 -
%：依赖父容器主轴尺寸，常用于水平布局中按比例分配空间；但如果父容器未设置明确宽度（如width: auto），% 会退化为auto - 特别注意：
flex-basis: 0和flex-basis: 0px行为不同——前者等价于0px，但某些旧版 Safari 对0解析异常，建议统一写0px
React/Vue 中动态更新 flex-basis 的坑
框架的样式合并逻辑会让 style 对象被浅合并，直接赋值 { flexBasis: '200px' } 可能丢掉原有 display: flex 或 order 等属性。
立即学习“前端免费学习笔记（深入）”；
- React 中别这么写：
style={{ flexBasis: value }}——应该用展开符保留原始样式：style={{ ...originalStyle, flexBasis: value }} - Vue 模板绑定同理，避免只写
:style="{ flexBasis: val }"，应合并：:style="[baseStyle, { flexBasis: val }]" - 服务端渲染（SSR）下，首次 hydrate 时 CSS 变量可能尚未注入，导致初始 flex-basis 错乱，建议加
useEffect或onMounted延迟设置
flex-basis 变更一定会触发 layout；频繁修改（比如拖拽过程中每帧都设）容易卡顿，真要高性能，得用 transform 模拟缩放，或者节流到 60fps 以内。 
