直接写 style="flex-grow: 2" 无效，因 flex-grow 必须在 display: flex 的父容器内才生效；单独设于子元素会被浏览器忽略。
flex-grow 内联样式写法是否生效？
直接写 style="flex-grow: 2" 是无效的——flex-grow 必须在 display: flex 的父容器内才起作用。单独给子元素加这个样式，浏览器会解析但忽略。常见错误是只改子项，忘了父容器没设 display: flex 或用了 inline-flex 却没注意行内布局限制。
动态修改 flex-grow 值的正确姿势
用 JavaScript 修改内联 flex-grow 是可行的，但要注意触发时机和 DOM 状态：
- 必须确保父容器已渲染且
display: flex已生效（不能在 DOM 插入前就设值） - 推荐用
element.style.flexGrow = "2"，而不是拼字符串赋值style属性，避免覆盖其他内联样式 - 若元素由框架（如 React）管理，直接操作
style可能被下一次 re-render 覆盖；应优先走 state 驱动或 useLayoutEffect 同步更新 - 修改后无需手动触发重排，浏览器会在下一帧自动重新计算 flex 分配
为什么改了 flex-grow 页面没变化？
最常踩的坑不是代码写错，而是布局前提不满足：
- 父容器宽度为
auto（比如在普通 block 流中未设宽），导致没有「剩余空间」可分 - 子元素内容过长（如未换行文本、固定高图片），触发了最小尺寸保护，
min-width: 0没加，flex-grow就卡住不动 - 同时写了
width或flex-basis，二者与flex-grow冲突，浏览器按规范以flex-basis为准，width可能被忽略 - 在 IE11 中，
flex-grow对0值支持异常，设flex-grow: 0会被当成1，此时需降级用flex: 0 0 auto
想让比例严格对应数值，必须统一 flex-basis
flex-grow: 2 和 flex-grow: 1 不等于 2:1 宽度——除非它们的起点一致。内容宽度不同，结果就不可控：
- 要实现真·2:1，所有子项都得设
flex-basis: 0，例如style="flex: 2 1 0"和style="flex: 1 1 0" - 仅靠内联改
flex-grow不够，必须同步控制flex-basis，否则旧值残留（比如默认auto）会干扰计算 - 动态场景下，建议用 class 切换代替纯内联样式，比如定义
.col-2 { flex: 2 1 0; }和.col-1 { flex: 1 1 0; }，JS 只负责el.classList.replace()
flex-shrink）三者共同作用。只调 flex-grow 就想控制最终宽度，就像只拧油门不管刹车和路面坡度。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
