flex-grow分配的是剩余空间而非内容权重或宽度占比，其值表示额外空间的相对比例；最终宽度=原始宽度+分得剩余空间，需统一flex-basis（如0）并处理min-width干扰才能实现预期比例。
不能靠“内容权重”自动伸缩——CSS Flex 没有内容语义感知能力，flex-grow 分的是剩余空间，不是内容重要性或信息量。
flex-grow 数值不等于宽度占比
flex-grow: 2 不代表占容器 2/3 宽度，它只表示：当父容器有剩余空间时，该子项分得的**额外空间**是 flex-grow: 1 项的两倍。最终宽度 = 内容原始宽度 + 分得的剩余空间。
- 常见现象：三个子项设
flex-grow: 1、2、1，但宽度比例远非 1:2:1 —— 因为它们默认flex-basis: auto，原始文字宽度不同（如“首页” vs “关于我们关于我们”） - 真正起作用的是
flex-basis基准。想让比例生效，必须统一基准，最常用的是flex-basis: 0（注意：无单位，不是0px或0%） -
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写，不是0px；写成flex: 1 1 0px在部分浏览器中会被忽略
column 方向下子元素宽度不随内容收缩？
在 display: flex; flex-direction: column 的布局中，子元素默认会拉伸填满父容器宽度（align-items: stretch），这不是 flex-grow 导致的，而是交叉轴对齐行为。
- 要让子元素宽度贴合内容，优先用
align-self: start（单个子项）或父容器设align-items: flex-start - 现代浏览器可直接写
width: fit-content，比折腾flex属性更直观 - 避免同时设置
width: 100%或align-items: stretch（默认值），否则宽度一定被撑满
为什么 flex: 0 0 auto 还是被压扁了？
flex: 0 0 auto 并不保证子元素“按内容宽度显示”，尤其在空间紧张时，浏览器可能强制压缩以避免溢出。
- 关键缺失项：
flex-shrink: 0和min-width: max-content必须配合使用 - 长单词或无空格 URL（如
https://a.b/c/d/e/f/g）在white-space: normal下会折行，导致fit-content失效；此时加white-space: nowrap+min-width: max-content更可靠 - 若子项内含图片或内联块，额外加
min-width: 0，防止浏览器按固有尺寸撑开 - 旧版 Safari（≤12）对
flex-basis: 0解析有 bug，降级可用flex-basis: 0%或拆开写flex-grow/flex-shrink
真正容易被忽略的，是内容本身的可压缩性：一个没设 min-width: 0 的子项，在遇到长文本时，min-width: auto 会把它锁死在内容最宽处；而一个写了 flex: 0 0 auto 却仍换行的按钮，大概率是父容器 flex-wrap: wrap 在作祟——Flex 行为永远是多个属性共同作用的结果，不是单个声明能决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
