flex-grow: 0 不阻止内容撑开，仅放弃剩余空间分配；flex-grow: 1 按 flex-basis（默认0）起始分配；auto 非标准值，实为 flex: auto（即 1 1 auto），flex-basis 为内容宽。
flex-grow 值为 0、1、auto 到底有什么区别
很多人设了 flex-grow: 0 就以为元素“锁死了”，结果文字一长还是撑开——因为 flex-grow: 0 只是放弃分剩余空间，不阻止内容自身撑大。flex-grow: 1 表示参与分配，但分配起点是 flex-basis（默认为 0），不是当前 width；而 flex-grow: auto 根本不是标准值，实际是 flex: auto 的误写，等价于 flex: 1 1 auto，此时 flex-basis 变成 auto（按内容宽），导致伸展行为和预期完全不同。
常见错误现象：
- 设了
flex-grow: 0，但子元素仍变宽 → 真正该加的是min-width: 0或overflow: hidden - 设了
flex-grow: 1却没效果 → 检查父容器是否漏了display: flex，或子元素有width/min-width卡死 - 多个
flex-grow: 1元素宽度不均 → 很可能是文本未换行，触发了min-content保护，临时加min-width: 0就能验证
为什么 flex-grow 设成 2 和 1 就是 2:1，但设成 50 和 100 不是 50%
flex-grow 是相对比例，不是百分比。它只看数值之间的比值：2 和 1 → 2:1；50 和 100 → 还是 1:2；0.5 和 1 → 也是 1:2。只要比值一致，结果就一样。它不接受 %、px、负数，写成 flex-grow: 50% 或 flex-grow: -1 会被浏览器直接忽略。
使用场景中要注意：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想让两个区域严格按 1:3 分配剩余空间，用
flex-grow: 1和flex-grow: 3，别写成25和75 - 如果初始内容宽度差异大（比如一个空 div，一个带长文本的 div），光靠 grow 值无法抹平差距，必须配合
flex-basis: 0或flex: 1（隐含flex-basis: 0%） -
flex-grow: 0+width: 200px≠ “固定且不撑开” —— 内容超长时仍会突破，需补min-width: 0
flex-grow 要配合 flex-basis 才能稳定控比
单独写 flex-grow: 2，它的 flex-basis 默认是 auto（即按内容宽），这意味着伸展是从“内容宽度”开始算的；而 flex: 2 是简写，等价于 flex-grow: 2; flex-shrink: 1; flex-basis: 0%，伸展从 0 开始，比例才真正可控。
推荐写法和影响：
-
flex: 1→ 安全均分，适合导航栏、卡片列等 -
flex: 2 1 0→ 明确 grow=2、shrink=1、basis=0，避免歧义 -
flex-basis: 0px比0%更稳妥，尤其在某些旧版 Safari 中 - 不设
flex-basis时，若子元素有width，它会成为 basis；但width可能被内容撑大，不如显式设flex-basis: 0干净
flex-grow 不生效？先查这三处硬性条件
flex-grow 是个“懒属性”：只有当父容器有剩余空间、且子元素没被其他规则锁死时，它才干活。失效往往不是语法错，而是前提不满足。
排查顺序建议：
- 父容器是否真有
display: flex？注意inline-flex也合法，但block或没设 display 就完全无效 - 子元素是否被
min-width、width或内容本身卡住？用开发者工具看 computed 的min-width，常是min-width: auto（即内容最小宽度）在作祟 - 是否意外触发了换行？
flex-wrap: wrap下，单行逻辑失效，flex-grow只在当前行内起作用
最常被忽略的一点：flex-grow 控制的是「剩余空间分配」，不是「尺寸上限」。它不会压缩内容，也不会阻止溢出——想防撑开，得靠 flex-shrink: 0 + min-width: 0 + overflow: hidden 组合拳。
