flex-basis无效的根源在于flex-grow/shrink的默认行为及主轴方向、父容器尺寸等上下文依赖，需显式控制伸缩性并确保环境匹配。
flex-basis写了但没效果，先看flex-grow和flex-shrink有没有抢控制权
flex-basis不是“最终宽度”，它只是空间分配前的起点。只要flex-grow大于 0 或 flex-shrink为 1（默认值），浏览器就会在它基础上再拉伸或压缩——你看到的尺寸早不是flex-basis了。
常见现象：flex-basis: 200px写了，元素却撑满容器、忽大忽小、或完全不响应。
- 临时验证：给元素加
flex-grow: 0; flex-shrink: 0;，此时flex-basis会直接变成最终尺寸 - 想固定宽度不伸缩：用
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 想有空间就撑、没空间也不缩：用
flex: 1 0 200px - 别只写
flex-basis单独属性——它没有“锁定”语义，必须显式声明flex-grow和flex-shrink意图
flex-direction为column时flex-basis失效？检查主轴方向和尺寸参照
flex-basis永远作用于主轴。当flex-direction: column时，主轴是垂直方向，flex-basis控制的是高度，不是宽度。很多人误设flex-basis: 200px却指望它限制宽度，自然无效。
更关键的是：column布局下，flex-basis生效的前提是父容器有明确高度（如height: 500px或height: 100vh）。否则flex-basis: 200px算的是“200px高”，但父容器高度是auto，整个计算链就断了。
- 查父容器 computed style 中的
height是不是具体数值（非auto） - 避免混用
height和flex属性——子项设height: 100%在column容器里基本无效 - 要占满剩余高度，优先用
flex: 1，而不是height: 100%
动态改flex-basis没反应？别直接操作style.flexBasis
直接写el.style.flexBasis = '240px'常失败，因为父级或自身用了flex: 1这类简写——它会把flex-basis重置为0%，覆盖你的内联设置。
真正起效的前提是：元素的flex值不能是简写形式，建议显式写成flex: 0 1 auto或flex: 0 1 content。
- 可靠写法1（单次强制）：
el.style.flexBasis = '240px';（注意单位不能省） - 可靠写法2（批量/主题化）：
document.documentElement.style.setProperty('--flex-basis', '240px');，但CSS中必须有flex-basis: var(--flex-basis, auto); - 可靠写法3（有限档位）：切换预设 class，比如
el.classList.replace('basis-sm', 'basis-lg'); - 用 CSS 变量时，
--flex-basis是自定义变量，flex-basis是原生属性，两者不互通——JS 改变量，CSS 必须用var()接入才生效
IE11里flex-wrap换行异常？flex-basis必须用百分比
IE11对flex-basis: auto或flex-basis: 0%解析极不稳定，常导致flex-wrap: wrap完全失效——所有子项挤在一行，直到溢出。
根本原因是 IE 把flex-basis当作换行判断的锚点，而百分比值能强制它以父容器当前宽度为参照，比px或auto靠谱得多。
- 写死
flex-basis: 33.33%（不用33%，IE对小数精度敏感） - 必须搭配
box-sizing: border-box，否则padding/border会让实际宽度超限 - 禁用
flex: 1——它在 IE 中展开为flex: 1 1 0%，那个0%会让换行逻辑直接跳过 - 响应式场景下，每个媒体查询断点都得重复声明
flex-basis，IE 不会动态更新已计算的值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
