flex-grow只分配剩余空间（容器主轴尺寸减子项flex-basis之和），非容器总宽；需统一flex-basis（如0）并配合min-width等后续约束才能精准控制布局。
flex-grow只分“剩余空间”，不是容器总宽
很多人以为flex-grow: 2就等于“占容器 2/3 宽度”，其实它只参与分配「容器主轴尺寸 − 所有子项flex-basis之和」这部分剩余空间。如果子项flex-basis加起来已超容器宽度，flex-grow完全不生效。
常见错误现象：flex-grow: 1的两个按钮宽度不等——因为默认flex-basis: auto，文字长度不同导致原始宽度差异大，剩余空间虽平分，起点不同，结果就失衡。
- 容器宽 600px，子项 A 原始宽 80px（短文本），B 原始宽 240px（长文本），都设
flex-grow: 1→ 剩余空间 = 600 − (80 + 240) = 280px → 各加 140px → A 最终 220px，B 最终 380px - 要真正等宽：统一设
flex-basis: 0，抹掉内容影响，再配flex-grow -
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写，注意单位——0%兼容性优于0或0px（尤其旧版 IE）
权重比例怎么算：先求和，再按比分配
flex-grow值本身不是绝对像素，而是相对权重。浏览器会先求所有子项flex-grow值之和，再按单个值占比切分可分配的剩余空间。
例如三个子项flex-grow分别为 1、2、3，容器剩余空间 300px：
- 总权重 = 1 + 2 + 3 = 6
- 子项1 分得：300 × (1/6) = 50px
- 子项2 分得：300 × (2/6) = 100px
- 子项3 分得：300 × (3/6) = 150px
注意：flex-grow支持小数（如0.5），计算逻辑一致；负值会被当作 0 处理。
flex-basis 是起点，不是最小宽度
flex-basis决定的是分配前的初始尺寸，不是min-width。它直接影响「剩余空间」的计算基数，也左右最终宽度是否可控。
-
flex-basis: auto（默认）：取元素自身width或内容宽度，不稳定，尤其文字长度变化时易抖动 -
flex-basis: 0（无单位）：强制归零起点，让flex-grow真正按权重瓜分整块容器宽度，适合等比布局 -
flex-basis: 200px：若想固定侧边栏，必须同步设flex-shrink: 0，否则仍可能被压缩 - 混用
width和flex-basis时，flex-basis优先级更高，width会被忽略
实际调试时容易忽略的干扰项
即使flex-grow和flex-basis都配对了，布局仍可能跑偏——常因这些隐性约束：
-
min-width/max-width在flex-grow分配后生效：某子项设了min-width: 300px，但按权重只该分到 200px，它仍会占满 300px，多占部分从其他子项可分空间里扣 - 图片、内联元素等固有尺寸项需额外加
min-width: 0，防止浏览器强行按原始尺寸撑开 - 响应式中改
flex-grow，别只改这一个值——flex-shrink和flex-basis也得同步重置，否则移动端可能意外压缩 - Chrome DevTools 的 Layout 面板勾选「Flexbox overlay」，能直接看到各子项基线、剩余空间线、实际伸缩结果
真正让flex-grow按预期工作的关键，从来不是数值本身，而是你有没有把flex-basis这个起点控制住，以及有没有意识到min-width这类属性是在伸缩之后才介入裁决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
