flex-basis不是width，它只参与flex空间分配的初始计算：先按flex-basis设定初始尺寸，再根据剩余空间、flex-grow/shrink重新分配；当flex-basis非auto时width被忽略，仅在auto时fallback并受内容影响。
flex-basis 不是 width，它只参与 flex 空间分配的初始计算
很多人写 flex-basis: 100px 却发现元素实际宽度不是 100px，第一反应是“属性没生效”。其实它生效了，只是你没看清 flex 布局的两阶段计算逻辑：先按 flex-basis 设定初始尺寸，再根据容器剩余空间、flex-grow 和 flex-shrink 重新分配。
常见误判点：
- 用 DevTools 查元素
computed width看到 200px，就以为flex-basis被覆盖了——其实它完成了它的任务，只是后续被拉伸了 - 把
flex-basis当成“最终宽度锁定”，忽略了flex-shrink: 1（默认值）在空间不足时会主动压缩它 - 在
flex-direction: column下误用width控制高度，而该用flex-basis或height
flex-basis: 0 后元素仍变宽？检查 min-width 和内容自然尺寸
flex-basis: 0 的本意是“从零开始分配”，但它不压制内容撑开。浏览器仍会按文字、图片、内联块等计算自然宽度，再和 flex-basis 比较取大者作为基础尺寸。所以即使写了 flex-basis: 0，一个含长 URL 的还是能撑到 300px。
真正让它“从零起步”的组合必须包含：
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: 0px（显式带单位，避免 IE11 解析歧义） -
flex-grow: 1（否则没空间可分） -
min-width: 0（关键！覆盖浏览器默认的min-width: auto，解除对内容宽度的隐式保护） - 对纯文本子项加
white-space: nowrap或overflow: hidden; text-overflow: ellipsis;，防止换行干扰
flex-basis 和 width 同时存在时，谁起作用？
当 flex-basis 值不为 auto 时，width 直接被忽略——不是优先级问题，是 flex 布局算法根本不会读取它。例如：
.item {
width: 200px;
flex-basis: 120px;
}
这个元素主轴初始尺寸就是 120px，width 不参与任何计算。只有当 flex-basis: auto（默认）时，浏览器才会 fallback 到 width 值，但还要再经过内容尺寸比对，不一定完全采纳。
flex-direction: column 下别用 width 控制高度
主轴方向变了，控制主轴尺寸的属性也要跟着变：flex-basis 对应主轴，width 和 height 是物理方向固定属性。在 flex-direction: column 时：
-
flex-basis控制的是高度（主轴尺寸），不是宽度 -
width仍控制宽度（此时是侧轴尺寸），对 flex 分配无直接影响 - 想让项目在列布局中“等高”或“按比例伸缩”，必须靠
flex-basis+flex-grow，而不是设height
最容易被忽略的其实是 min-width: 0 这个兜底规则——它不显眼，但在内容撑开、多层嵌套 flex 容器、或配合 flex-basis: 0 使用时，往往是唯一能打破默认最小尺寸限制的开关。
