flex-grow 无反应主因是父容器未设 display: flex、子项尺寸被 width/min-width 锁死，或父容器宽度为 0；动态新增元素需确保带 flex 样式；flex-grow 按权重分配剩余空间，非百分比；IE11 需显式写 flex: 1 1 0。
flex-grow 为什么加了没反应
常见现象是给子项写了 flex-grow: 1，但宽度还是挤在一起、不撑满、甚至完全没变化。根本原因是：父容器没设 display: flex，或者子项被设了 flex: 0 0 auto（比如用了 width 或 min-width 锁死尺寸），又或者父容器本身宽度为 0（比如未设宽、或被内容塌陷）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先确认父容器有
display: flex且有明确宽度（比如width: 100%或max-width） - 子项避免写死
width、min-width、max-width，尤其不要同时设width和flex-grow - 检查是否意外触发了
flex-shrink: 0（比如父容器空间不足时，它会优先压缩可缩项，导致 grow 失效）
动态增删 item 后 flex 布局错乱
用 JS appendChild 或 innerHTML 新增元素后，发现新项不参与 flex 分配，或旧项突然换行、间距崩坏。这不是 flex 的 bug，而是新增节点没继承父容器的 flex 样式逻辑 —— 实际上它继承了，但问题常出在「新增节点没设基础 flex 子项样式」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有动态插入的子项，必须带 class 或内联 style，确保有
flex: 1或至少flex-grow: 1 - 避免用
innerHTML += ...拼接，它会重置整个子树 DOM 状态；改用document.createElement+appendChild - 如果用框架（如 React/Vue），注意 key 值唯一性，否则 diff 时可能复用旧节点，导致样式残留
多个 flex-grow 值混用时的分配逻辑
flex-grow 不是“占多少百分比”，而是按「权重比例」分配剩余空间。比如三个子项分别设 flex-grow: 1、2、1，那它们分到的额外空间比是 1:2:1，不是 25% / 50% / 25% —— 前提是它们基础尺寸（content + padding + border）一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若想严格按比例控制，统一子项的
flex-basis（比如都设flex-basis: 0），否则基础尺寸差异会干扰 grow 计算 - 慎用小数
flex-grow（如0.5），不同浏览器渲染精度可能有微小差异，视觉上不易察觉但布局可能抖动 - 当某子项内容很长（如长文本无换行），它会突破 grow 分配，此时需配合
min-width: 0+overflow: hidden控制
IE11 下 flex-grow 行为异常
IE11 对 flex-grow 支持不完整：它不支持 flex-grow: 0 的显式重置（会当成 1），也不正确处理 flex-basis: auto 与 content 尺寸的关系，常导致第一项独占整行、其余项换行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须为每个子项显式声明
flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0），不能只写flex-grow - 避免在 IE11 场景下依赖
flex-grow做精确等分；可降级用display: table-cell+width: 1%模拟 - 检查是否启用了
-ms-flex前缀，现代写法（无前缀）在 IE11 中反而更不可靠
真正麻烦的不是怎么写 flex-grow，而是它和 flex-basis、min-width、内容自然尺寸之间那层隐式博弈 —— 浏览器计算时全都要卷进去，而你往往只盯着 grow 这一个值看。
