flex-grow不生效是因为容器无剩余空间，取决于子项flex-basis总和是否小于容器尺寸；推荐用flex: 1（即flex-basis: 0%）替代单独flex-grow: 1以确保等分。
flex-grow 为什么经常“不生效”？
因为 flex-grow 只在容器有剩余空间时才起作用，而是否“有剩余空间”，取决于所有子项的 flex-basis（或 width/height）总和是否小于容器尺寸。如果子项的 flex-basis 加起来已经撑满甚至溢出容器，flex-grow 就完全没机会分配空间。
常见错误现象：flex-grow: 1 写了但元素宽度没变；多个子项都设 flex-grow: 1 却宽度不均——往往是因为它们的 flex-basis 不一致（比如一个写了 flex-basis: 200px，另一个是默认的 flex-basis: auto，而后者又受内容宽度影响）。
-
flex-basis: auto会先按内容宽高计算基准，再参与剩余空间分配 -
flex-basis: 0是最可控的起点：它把基准设为 0，让flex-grow完全主导伸缩比例 - 避免混用
width和flex-basis：两者冲突时，flex-basis优先级更高（除非是flex-basis: auto且width已明确设置）
flex-basis: 0 与 flex-basis: auto 的实际差异
这是最容易被忽略的兼容性细节。在多数现代浏览器中，flex-basis: auto 表现为“先看内容宽度，再看 width 属性”，但它的行为在不同场景下不稳定：
- 文字内容多时，
auto可能导致换行或溢出，影响flex-grow计算 - 图片、input 等替换元素，
auto会取其固有尺寸，而非容器约束后的尺寸 -
flex-basis: 0则彻底剥离初始尺寸干扰，所有伸缩完全由flex-grow比例决定
所以，当你要实现“等分容器宽度”的布局（如三栏导航），直接写 flex: 1（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0%）比 flex-grow: 1 单独使用更可靠。
立即学习“前端免费学习笔记（深入）”；
flex 属性简写如何影响 flex-basis 单位
flex 是 flex-grow、flex-shrink、flex-basis 的简写，但它的默认值和单位隐含规则常引发误解：
-
flex: 1等价于flex: 1 1 0%（注意：不是0px，是0%） -
flex: 1 1 auto才等价于显式写flex-basis: auto -
flex: 0 0 auto表示不伸缩、不收缩、基准为内容宽——这是按钮、图标等固定尺寸组件的常用写法 - 单位必须明确：
flex-basis: 0默认单位是px，而flex-basis: 0%是百分比，二者在响应式容器中表现可能不同
/* 推荐：明确意图 */ .item-1 { flex: 2 1 0%; } .item-2 { flex: 1 1 0%; } /* 两列按 2:1 分配剩余空间，不受内容宽度干扰 */flex-grow 配合 min-width / max-width 的边界行为
flex-grow 不会突破 min-width 或 max-width 的限制，但它仍会尝试分配空间，可能导致其他兄弟元素被压缩（尤其当 flex-shrink 未禁用时）。
- 想让某元素“至少 200px，但可随容器变大”，应设
min-width: 200px; flex: 1 1 auto;—— 此时flex-basis: auto保证初始按内容/最小宽渲染，flex-grow在空间富余时继续撑开 - 若设
flex: 1; min-width: 200px;，则flex-basis实际为0%，min-width成为最终下限，但伸缩逻辑仍基于 0% 基准，更稳定 - 慎用
flex-shrink: 0配合flex-grow：一旦内容超长或容器变窄，容易触发横向滚动或溢出
真正难处理的是混合了文本流、图片、表单控件的复杂卡片布局——这时 flex-basis 的单位选择（px vs % vs auto）和 min/max-width 的组合，往往比 flex-grow 本身更决定成败。