flex-grow未按比例缩放是因为它只分配剩余空间而非容器总宽；需设flex-basis: 0（如flex: 1 1 0）消除内容宽度干扰，再配合min-width: 0和box-sizing: border-box确保严格比例。
flex-grow 为什么设了却没按比例缩放
因为 flex-grow 只分配「剩余空间」，不是容器总宽的百分比。如果子元素默认 flex-basis: auto，浏览器会先按内容宽度（比如一段长文本、一张未设宽的图片）占位，再把剩下的缝隙按 flex-grow 分——结果就是内容宽的项更宽，比例完全失真。
常见错误现象：flex-grow: 1 写了三遍，但三个 div 宽度相差一倍；或者小屏下子项挤不出去、直接溢出容器。
- 必须显式设
flex-basis: 0（注意：是0，不是0px或0%），抹掉内容对初始尺寸的影响 - 推荐统一用
flex简写，比如flex: 1 1 0，避免漏掉flex-shrink导致意外撑开 - 含图片、内联块或长英文单词的子项，额外加
min-width: 0，否则浏览器会按固有尺寸卡住不缩
怎么让两个子项严格按 3:7 占满整行
不能只写 flex-grow: 3 和 flex-grow: 7，那只是权重，没指定起点。真正起作用的是 flex-basis + flex-grow 的组合。
- 父容器需有明确宽度（如
width: 100%或max-width），且display: flex - 子项 A：
flex: 3 1 0→flex-grow: 3，flex-shrink: 1，flex-basis: 0 - 子项 B：
flex: 7 1 0→ 同理，权重为 7 - 最终宽度 = 容器总宽 × 权重 / 总权重 → A 占 30%，B 占 70%
如果想保留最小内容宽度（比如按钮文字不能太窄），可改用 flex: 3 1 auto，但此时要配 min-width 控制下限，否则比例仍不可控。
响应式场景下 flex-basis 比 flex-grow 更关键
flex-grow 是无单位的权重系数，没法表达“占屏幕 40%”这种需求；而 flex-basis 支持 %、vw、rem，天然适配断点变化。
- 大屏（≥1200px）：设
flex-basis: 33.333%+flex-grow: 0，禁止拉伸，保持等分 - 中屏（768px–1199px）：改
flex-basis: 50%，并启用flex-wrap: wrap - 小屏（flex-basis: 100%，所有子项独占一行
别在媒体查询里反复调 flex-grow——它不带单位，改了也看不出比例变化；真正决定“从哪开始伸缩”的，永远是 flex-basis。
Safari 中 flex-shrink 不生效怎么办
flex-shrink 在 Safari 里尤其容易失效，不是 bug，而是它对“可收缩空间”的判断更严格：如果子项没显式设 min-width: 0，又含图片或 inline 元素，Safari 默认按 min-width: auto 锁死最小尺寸，flex-shrink 直接被跳过。
- 强制加
min-width: 0到每个可能收缩的子项上 - 避免混用
width和flex-basis：二者冲突时，flex-basis优先，width可能被忽略 - 调试时打开 DevTools 的 Flexbox overlay，看实际「基线宽度」和「剩余空间」是否为预期值
最常被忽略的一点：比例缩放的本质不是“让子项变小”，而是“让它们从同一个零起点出发，按权重瓜分全部可用空间”。起点没归零，后面全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
