子元素不能等宽，根本原因不是flex-grow失效，而是无剩余空间可分；需统一flex-basis为0、确保父容器尺寸可计算、保持弹性链完整、清理min-width等干扰项。
子元素不能等宽，不是 flex-grow 失效了，而是它根本没空间可分——“等宽”这件事，需要你手动把起点拉平、把空间算清、把链路接上。
flex: 1 不等于等宽，它只分“剩余空间”
很多人以为写 flex: 1 就万事大吉，但它的实际行为是：flex-grow: 1 + flex-shrink: 1 + flex-basis: 0%。关键在第三个值：它决定“从哪开始分”。默认 flex-basis: auto 时，浏览器会先按内容宽度定起点——一个含长文本的 div 和一个空 div 同时设 flex: 1，前者起始就宽，最终必然更宽。
- 想真正等宽，必须显式设
flex-basis: 0或flex-basis: 0% -
flex: 1等价于flex: 1 1 0%，但 IE11 下有 bug，必须写成flex: 1 1 0%或分开三行声明 - 避免混用
width和flex-basis：一旦写了width: 200px，flex-basis就被覆盖，flex-grow只能在超出部分起作用
父容器尺寸不可计算，flex-grow 直接静默
flex-grow 不报错、不警告，但它需要一个明确的主轴可用空间才能工作。如果父容器宽度/高度是 auto（比如被浮动、绝对定位影响，或没设 width/height），浏览器算不出“剩余空间”，flex-grow 就彻底不执行。
- 水平布局（
flex-direction: row）：父容器必须有明确width，如width: 100%、max-width: 1200px，不能仅靠内容撑开 - 垂直布局（
flex-direction: column）：父容器需可计算高度，常见写法是min-height: 100vh或逐层设height: 100% - 微信小程序中，父容器必须显式设
height，不能依赖flex-grow推导 - 移动端 Safari 软键盘弹出时
100vh会缩容，改用min-height: 100dvh更稳
弹性链中断或 min-width 干扰导致宽度失衡
flex-grow 只响应**直接父容器**提供的空间上下文。中间任何一层漏掉 display: flex，整条链就断了；而替换元素（如 img、input）自带 min-width: auto，也会卡住伸缩。
- 典型断裂场景：
.app是 flex 容器，.main-content设了flex-grow: 1占高，但没加display: flex，其子元素再写flex-grow: 1也完全无效 - 修复方法：
.main-content加display: flex+flex-direction: column，同时给子元素加min-height: 0 - 图片、
input、textarea等需额外加min-width: 0才能参与 flex 分配 - 响应式断点中改了
width但没同步更新flex-basis，会导致断点后宽度不生效
真正卡住等宽的，往往不是某一行代码写错，而是起点没拉平、空间不可算、链条断了、干扰项没清理——四个条件缺一不可。调试时别只盯着 flex-grow 值，先看 computed 样式里的 flex-basis 是多少、父容器 width/height 是否有值、中间 display 是否连续、子元素有没有隐藏的 min-width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
