结论：flex-grow、flex-shrink、flex-basis必须协同理解；flex-basis是空间分配起点（非width替代），决定初始占位；flex-grow按比例瓜分剩余空间，flex-shrink按加权值分摊溢出，三者缺一易致小屏截断或布局错乱。
直接说结论：这三个属性必须一起理解，单独设 flex-grow 而不控制 flex-basis 和 flex-shrink，大概率导致小屏下内容被意外截断或布局错乱。
flex-basis 是分配空间的起点，不是 width 的替代品
很多人误以为 flex-basis 就是“给子项设宽度”，其实它定义的是「分配剩余空间前，这个项目打算占多大」。浏览器先按 flex-basis（或 width，如果没设）算出所有项目的初始总宽，再看有没有剩余或溢出。
- 设为
flex-basis: 200px：不管内容多少，先按 200px 占位 - 设为
flex-basis: 30%：按容器宽度的 30% 计算初始尺寸 - 设为
flex-basis: auto（默认）：退回到width值；若width也没设，就由内容撑开 - ⚠️ 常见坑：同时写
width: 100px和flex-basis: 200px，后者会覆盖前者 ——flex-basis优先级更高
flex-grow 只瓜分“剩余空间”，且比例基于数值比值
flex-grow 不是“放大到指定宽度”，而是把容器主轴上「所有项目初始尺寸加起来之后剩下的空隙」，按比例分给设置了该值的项目。
- 容器宽 600px，三个子项
flex-basis分别是 100px、150px、100px → 剩余空间 = 250px - 它们的
flex-grow是1、2、0→ 总份数 = 3 → 每份 ≈ 83.33px - 结果：第一项得 83.33px，第二项得 166.67px，第三项得 0 → 最终宽度分别是 183.33px、316.67px、100px
- ⚠️ 常见坑：
flex-grow: 1在多个同级元素中看似“均分”，但只要其中某个设了flex-basis更大，它实际占的绝对宽度就会更大
flex-shrink 决定谁来“扛”溢出，收缩量不是等比而是加权计算
当所有项目的 flex-basis（或 width）加起来超过容器宽度时，flex-shrink 才生效。它不是简单地按比例缩小，而是按「flex-basis × flex-shrink」加权后分摊溢出量。
- 容器宽 400px，三个子项
flex-basis是 200px、150px、100px，flex-shrink是1、2、0 - 总基准 = 450px，溢出 = 50px
- 权重和 = 200×1 + 150×2 + 100×0 = 500
- 第一项收缩量 = (200×1)/500 × 50 = 20px → 最终宽 180px
- 第二项收缩量 = (150×2)/500 × 50 = 30px → 最终宽 120px
- 第三项
flex-shrink: 0→ 保持 100px，可能溢出容器 - ⚠️ 常见坑：设
flex-shrink: 0看似“保护内容”，但在窄屏下容易直接撑破父容器或触发横向滚动条
真正难的不是记住公式，而是每次改 flex-grow 之前，先确认 flex-basis 是否合理、flex-shrink 是否会在小屏下失控。用 flex: 0 0 auto 开始调试，比一上来就写 flex: 1 安全得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
