flex-grow按比例分配剩余空间而非容器总宽，最终宽度=原始宽度+分得的剩余空间；需统一flex-basis（如设为0）才能实现预期比例，否则内容宽度差异会导致比例失真。
CSS Flex 没有“内容权重”概念，所谓“按内容权重自动伸缩”是常见误解——flex-grow 分的是剩余空间，不是文字长短、信息量或重要性。
flex-grow: 2 并不等于占容器 2/3 宽度
它只表示：当父容器有剩余空间时，该子项分得的额外空间是 flex-grow: 1 项的两倍。最终宽度 = 原始宽度（由 flex-basis 或内容决定） + 分得的剩余空间。
常见错误现象：
- 三个子项分别设
flex-grow: 1、flex-grow: 2、flex-grow: 1，但宽度比例远非 1:2:1 - 原因在于默认
flex-basis: auto，原始内容宽度差异大（如“首页” vs “关于我们关于我们关于我们”） - Chrome DevTools 的 Layout 面板勾选 “Flexbox overlay” 可直观看到基线与剩余空间分配线
想让比例生效，必须统一 flex-basis
最常用且可靠的做法是显式设为 0（注意：无单位，不是 0px 或 0%），抹掉内容原始宽度干扰：
-
flex: 1 0 0等价于flex-grow: 1; flex-shrink: 0; flex-basis: 0 -
flex: 2 0 0和flex: 1 0 0才能真正实现 2:1 的剩余空间分配 - 旧版 IE 兼容需用
flex-basis: 0%，但现代项目可直接用0 - 若子项含图片或内联块，额外加
min-width: 0，防止浏览器按固有尺寸撑开
column 方向下子元素宽度不随内容收缩？
这不是 flex-grow 的问题，而是交叉轴对齐行为导致的：align-items: stretch（默认值）会让子项拉伸填满父容器宽度。
- 让单个子项贴合内容宽：
align-self: start - 让所有子项都贴合内容宽：父容器设
align-items: flex-start - 更直观写法（现代浏览器）：
width: fit-content，语义明确且无需关心 flex 轴向 - 避免同时存在
width: 100%或未重置的align-items: stretch
为什么 flex: 0 0 auto 还是被压扁了？
这不是语法失效，而是浏览器在空间紧张时的兜底行为——flex-shrink: 0 不等于“绝对不可压缩”，尤其当内容含长单词、URL 或未设 min-width: max-content 时。
- 关键补救：加
min-width: max-content强制按最长内联内容（如单行 URL）计算最小宽度 - 防折行干扰：
white-space: nowrap配合min-width: max-content更可靠 - 若只是要“内容多宽就占多宽”，且不依赖 flex 对齐能力，改用
display: inline-flex或直接width: fit-content更简单 - 真正容易被忽略的是组合影响：一个写了
flex: 0 0 auto却仍换行的按钮，大概率是父容器flex-wrap: wrap在作祟
复杂点在于：Flex 行为永远是 flex-basis、min-width、white-space、align-items 等多个属性共同作用的结果，单改一个值往往不够。调试时优先看 computed 样式里 flex-basis 是否真为 0，以及 width 是否被其他规则覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
