flex-basis的三种常用取值及效果：auto（回退width或内容撑开）、0（让flex-grow均分剩余空间）、具体值（如30%或200px，忽略同级width）；需配合flex-grow才能实现弹性伸缩，小屏推荐flex-basis: 0 + flex-grow组合。
直接用 flex-basis 设置子项在主轴上的初始大小，关键不是“怎么写”，而是“写什么值、为什么这么写”。它不是 width 的替代品，而是 flex 分配逻辑的起点。
flex-basis 的三种常用取值及效果
flex-basis: auto（默认）：回退到元素自身的 width（或 height，取决于主轴方向）。没设 width 就由内容撑开。适合内容长度不固定、又希望保留原始尺寸感的场景，比如按钮文字长度不一。
flex-basis: 0：强制初始占位为 0，把全部主轴空间让给 flex-grow 去分配。这是实现“均分剩余空间”的真正方式——例如导航栏中多个菜单项平分容器宽度，就该设 flex-basis: 0; flex-grow: 1。
flex-basis: 30% 或 200px：按百分比是相对于父容器当前宽度计算，响应式友好；固定 px 则尺寸稳定，但小屏下容易溢出。注意：一旦写了 flex-basis，同级的 width 就会被静默忽略——调试时发现宽度假了，八成是这里冲突了。
立即学习“前端免费学习笔记（深入）”；
它和 width 的关系必须理清
- 同时写
width: 100px; flex-basis: 200px;→ 最终按 200px 算 - 只写
width: 100px;，不写 flex-basis → 等效于flex-basis: auto - 只写
flex-basis: 150px;，不写 width → width 不再起作用，布局完全由 flex-basis 主导
配合 flex-grow 才能发挥真实作用
单独设 flex-basis: 120px 只是定起点，不改变最终尺寸。要让它“扩展”得合理，得加 flex-grow：
- 想让某一项优先占满可用空间？设
flex-basis: 0; flex-grow: 1 - 想让三项按比例分剩余空间？先统一设
flex-basis: 0，再分别设flex-grow: 1、2、1 - 想保留基础宽度、再按需伸缩？比如表单输入框固定最小宽度，再弹性撑开：
flex-basis: 180px; flex-grow: 1
小屏下别踩的坑
如果只设 flex-grow: 1 却忘了调 flex-basis，尤其内容较长时，小屏很可能截断或强制换行——这不是 bug，是浏览器按规则算出来的结果：起点太大，剩余空间不够分，flex-grow 就没东西可分。
建议移动端优先用 flex-basis: 0 + flex-grow 组合，再配合 min-width 保底线，这样既灵活又可控。
