flex-grow按比例分配剩余空间：剩余空间=容器主轴尺寸−Σflex-basis，再按各子项flex-grow值占比分配；flex-basis优先级高于width，设为0可忽略内容宽实现纯比例分配。
flex-grow 是怎么算出“该分多少”的
它不直接按百分比切空间，而是先算「剩余空间」，再按比例分配。剩余空间 = 容器主轴尺寸 − 所有子项的 flex-basis（或 width，当 flex-basis 为 auto 时）之和。只有这个值 > 0，flex-grow 才生效。
比如容器宽 600px，两个子项 flex-basis 分别是 100px 和 150px，那剩余空间就是 600 − (100 + 150) = 350px。若它们 flex-grow 是 2 和 1，总份数为 3，每份 ≈ 116.67px，最终分别扩展 233.33px 和 116.67px。
常见错误：
- 误以为
flex-grow: 2表示“占两倍宽度”，其实它只管“多拿多少剩余空间” - 忘了
flex-basis优先级高于width，写width: 200px; flex-basis: 100px;时，实际基准尺寸是 100px - 在
flex-direction: column下仍用 width 判断基准尺寸，其实该看 height 和flex-basis
flex-shrink 的收缩不是简单反向缩放
flex-shrink 的计算更复杂：它先按 flex-basis 算出所有子项的“初始总尺寸”，再对比容器尺寸得出「溢出空间」；然后每个子项的收缩量 = 溢出空间 × (flex-shrink × flex-basis) / 所有子项的 (flex-shrink × flex-basis) 之和。
关键点在于：收缩量跟 flex-basis 成正比。一个 flex-basis: 300px; flex-shrink: 1 的项，比 flex-basis: 100px; flex-shrink: 1 的项多缩两倍，哪怕 flex-shrink 相同。
容易踩的坑：
- 设
flex-shrink: 0本意是“禁止收缩”，但若其他项也设了 0，整个布局会溢出容器，且不触发滚动（除非显式加overflow） - 误用
width替代flex-basis控制基准尺寸，导致收缩计算偏离预期 - 在响应式中动态改
flex-basis（如从 200px → 50%），但没同步调flex-shrink，结果收缩行为突变
flex: 1、flex: auto、flex: 0 1 auto 的真实含义
这些简写不是“快捷方式”，而是明确覆盖三个独立属性的默认值。例如：
flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0 —— 注意是 0，不是 auto。这意味着它完全忽略自身内容宽度，纯按比例瓜分剩余空间。
flex: auto 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: auto —— 这时才真正尊重内容宽度或 width 值作为基准。
flex: 0 1 auto 就是默认值，即不伸展、可收缩、基准为 auto。
性能提示：大量使用 flex-basis: auto 且内容复杂时，浏览器需反复测量内容尺寸，可能触发回流。固定 flex-basis（如 200px 或 30%）更稳定。
调试时怎么看 flex-grow/shrink 是否真在起作用
光看渲染结果容易误判。推荐三步验证：
- 用浏览器开发者工具检查元素 computed 样式，确认
flex-basis实际解析值（注意单位和是否被width覆盖） - 临时把所有子项
flex-grow设为 0，观察容器是否还有空白；有，则说明原本有剩余空间 - 把
flex-shrink全设为 0，再缩小容器宽度，看是否溢出 —— 若溢出，说明原来确实在收缩
最常被忽略的一点：flex-grow 和 flex-shrink 的计算都发生在主轴方向，而主轴由 flex-direction 决定。写错方向（比如想控制高度却忘了设 flex-direction: column），整个计算逻辑就跑偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
