flex-basis是伸缩前的初始尺寸，非width替代品；设为auto时取内容宽或width，设为0则清空起点由flex-grow分配剩余空间。
flex-basis 是“起手式”，不是 width 的替代品
它决定项目在伸缩前的初始尺寸，但这个尺寸会参与后续计算，不是最终宽度。设为 auto 时，取内容宽度或显式 width；设为 0 时，相当于“清空起点”，所有剩余空间都按 flex-grow 比例瓜分。
常见错误是把 flex-basis 当作固定宽来用：比如写 flex: 1 1 200px 后发现项目没占满容器——因为 flex-grow: 1 只对“容器宽 − 所有 flex-basis 和”这部分空间生效，200px 已经先占掉了。
- 想让多个项目等宽填满容器？别用
flex: 1（等价于flex: 1 1 auto），改用flex: 1 1 0或显式flex-basis: 0 - 想固定某项目不随内容变宽？必须同时设
flex-shrink: 0和明确的flex-basis（如flex: 0 0 120px），只设flex-shrink: 0不够，flex-basis: auto仍会随文字撑开
flex-grow 分配的是“剩余空间”，不是容器宽度
它的作用对象是 容器主轴总长 − 所有项目的 <code>flex-basis（或 width）之和。这个差值才是“剩余空间”，flex-grow 只在这个范围内按比例分配。
示例：容器宽 600px，三个项目 flex-basis 分别为 100px、150px、200px，总和 450px → 剩余空间 150px。若它们 flex-grow 为 1、2、1，则总份数为 4，各自再加 37.5px、75px、37.5px。
-
flex-grow: 0是默认值，项目完全不放大，哪怕后面空一大片也不动 - 设为
flex-grow: 1不代表“占满剩余”，而是“参与分配”，最终宽度 =flex-basis+ 分到的增量 - 如果所有项目
flex-grow都是 0，剩余空间就真剩着，不会自动均分
flex-shrink 不是“按数值比压缩”，而是加权收缩
当项目总 flex-basis 超过容器宽度时，浏览器按公式 压缩量 = 总溢出 × (flex-shrink × flex-basis) / 所有项目 (flex-shrink × flex-basis) 之和 计算每个项目的收缩值。
这意味着：flex-shrink: 2 的项目不一定比 flex-shrink: 1 的项目多缩一倍——如果前者 flex-basis 很小，它实际承担的压缩可能更少。
- 想让某个项目完全不缩小？必须
flex-shrink: 0+ 显式flex-basis（如200px），否则flex-basis: auto下内容一多，它自己就先撑开了 -
flex-shrink: 0不能阻止溢出，只是拒绝参与压缩，项目可能直接撑破容器或触发横向滚动 - 调试时可临时加
border和outline查看真实渲染尺寸，避免被内容视觉干扰判断
flex 简写容易掩盖关键差异
flex: 1、flex: 1 1 0、flex: 0 0 auto 看似接近，行为却完全不同。简写省略时补全规则固定：flex: a → flex-grow: a; flex-shrink: 1; flex-basis: auto；flex: a b → flex-grow: a; flex-shrink: b; flex-basis: auto；flex: a b c 才是完整三参数。
最常踩的坑是误以为 flex: 1 = “占满”，结果因内容宽度不一致导致各列不等宽；或者写 flex: 1 0 想禁止缩小，却忘了 flex-basis 还是 auto，内容一多照样撑开。
- 生产环境建议显式写出三参数，比如
flex: 1 1 0或flex: 0 0 120px，避免靠记忆补全规则 - 用 DevTools 的 Layout 面板检查每个项目的
flex-basis实际计算值，有时它会继承父级width或受 min/max-width 影响 - 移动端需额外注意
flex-basis: auto在小屏下可能因换行、字体缩放产生意外尺寸
flex-basis 起手，经 flex-grow 放大或 flex-shrink 压缩，每一步都依赖上一步的结果。任何一环的隐式取值，都可能让最终布局偏离预期。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
