flex-basis不是width，它在flex容器中优先级高于width；flex-basis非auto时会覆盖主轴方向的width计算，真正等分需配合flex-basis:0px、flex-grow:1和min-width:0。
flex-basis 不是 width，别混着写
很多人在写响应式 flex 布局时，习惯先设 width: 200px，再加 flex-basis: 100px，结果发现元素宽度始终是 100px——因为只要 flex-basis 不是 auto，它就覆盖主轴方向的 width（或 height）计算。这不是 bug，是规范行为。
常见错误现象：width: 100%; flex-basis: auto; 在小屏下本想占满，却因父容器未设宽、flex-basis: auto 回退到内容尺寸，导致卡片被文字撑开、错位。
- 只用
flex-basis控制主轴初始大小，删掉冗余的width/height - 若需 fallback 行为（比如降级到非 flex 场景），才保留
width，但要确认flex-basis是auto - 预处理器里避免
flex-basis: var(--size); width: var(--size);这种写法——变量解析失败时只剩一个生效，布局直接崩
flex-basis: 0px + flex-grow: 1 才是均分的稳解
想让按钮组、标签栏、网格项在移动端等宽？别信 flex-basis: 33.333% —— 百分比依赖父容器主轴尺寸，而 flex 容器本身常没设明确 width，尤其嵌套或 position: absolute 场景下，flex-basis: 100% 可能算出 0px。
实际效果：设 flex-basis: auto 时，长文本项会撑开整行，短图标项被压缩到看不见；换成 0px 后，所有项从零开始按 flex-grow 分配空间，真正均分。
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: 0px; flex-grow: 1;是最可靠的等分布局组合 - 必须搭配
min-width: 0;（默认是auto），否则内容仍可能撑大元素 - IE11 不支持
flex-basis: 0%，务必写成0px
百分比值只认直接父容器的主轴尺寸
flex-basis: 50% 看起来直观，但它永远只相对于**直接父 flex 容器的主轴尺寸**，不是视口、不是外层容器、也不是你“以为”的那个宽度。
典型翻车场景：三层嵌套 flex —— 外层 flex-direction: column，中间层 row，内层又是 column。这时内层子项的 flex-basis: 50% 是按中间层容器的宽度算的，跟外层高度完全无关。如果中间层没设 width，这个 50% 就是 0px。
- 检查 computed style，确认浏览器最终解析出的
flex-basis是数值还是auto - 百分比生效的前提：直接父容器在主轴方向有明确尺寸（
width或height） - 响应式断点中，建议用
flex: 0 0 100%替代flex-basis: 100%，更易追踪
用 flex 简写替代单独声明更安全
单独写 flex-basis 容易被后续的 flex-grow 或 flex-shrink 规则覆盖，尤其用 CSS-in-JS 或模块化样式时，属性注入顺序难控。
例如：flex: 1 1 200px 明确表示 flex-grow: 1、flex-shrink: 1、flex-basis: 200px，三者原子性绑定；而分开写，flex-basis 可能被其他规则重置为 auto。
- 固定侧边栏 + 自适应主区：用
flex: 0 0 250px和flex: 1 1 auto，比分别声明更可靠 - 避免写
flex: 200px（等价于flex: 0 0 200px），容易误判为可伸缩 - 移动端优先布局中，
flex: 0 1 calc(100vw - 48px)比flex-basis+ 媒体查询更直接
最常被忽略的其实是 min-width: 0 —— 它和 flex-basis: 0px 是一对搭档，缺一不可。否则即使写了 0px，内容依然能突破限制，让均分失效。
