flex-grow设为1、2、3未按比例缩放，是因为它仅分配剩余空间而非容器总宽；需显式设flex-basis: 0（非auto）消除内容宽度干扰，并配合min-width: 0和box-sizing: border-box确保严格比例。
flex-grow设为1、2、3时为什么没按比例缩放
因为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%
Safari里flex-grow比例失效怎么办
Safari 对「可收缩空间」的判断更严格：如果子项没显式设min-width: 0，又含图片或 inline 元素，它默认按min-width: auto锁死最小尺寸，flex-shrink直接被跳过，连带影响flex-grow在窄屏下的表现。
- 强制加
min-width: 0到每个可能收缩的子项上 - 避免混用
width和flex-basis：二者冲突时，flex属性优先级更高，但行为不稳定 - IE10/11 对
flex: 2 0 0%支持不好，可降级为flex-grow: 2; flex-shrink: 0; flex-basis: 0
flex-grow遇到min-width/max-width时的行为
flex-grow的分配过程在min-width和max-width之后生效——也就是说，浏览器先确保每个子项不小于min-width、不大于max-width，再用剩余空间去分配。
- 如果某子项设了
min-width: 300px，而它按权重本该只分到 200px，那它仍会占满 300px，多占的部分从其他子项的可分配空间里扣 - 反过来，设了
max-width: 100px的子项，即使权重高、该分 250px，也最多停在 100px，溢出空间重新分配给其余项 - 调试时打开浏览器开发者工具，勾选「Layout」面板里的「Flexbox overlay」，能直观看到各子项的基线、剩余空间和实际伸缩结果
flex-grow值本身，而是flex-basis: 0和min-width: 0这两个配套设置。尤其当子项里有图片、图标或长单词时，缺一个就可能让比例完全跑偏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
