不一定。flex-grow设为1未必撑满，因剩余空间=父容器尺寸−子项flex-basis总和；默认flex-basis:auto按内容计算，易导致撑不满或撑过头；需显式设flex-basis:0并配合flex-grow:1才能可靠等分。
flex-grow 设为 1 就一定能撑满吗？
不一定。只设 flex-grow: 1 而忽略 flex-basis，元素可能不会如预期撑满——尤其当父容器有 padding、子元素有 border/margin，或存在内容溢出时。flex-grow 是按「剩余空间」分配比例，而「剩余空间 = 父容器宽高 − 所有子项的 flex-basis 总和」。如果 flex-basis 被设为 auto（默认），它会先按内容宽度计算基线，再分配剩余空间，结果常是“撑不满”或“撑过头”。
- 想真正撑满：显式设
flex-basis: 0，让基线归零，把全部父容器空间当作“剩余空间”来分配 - 多个同级元素都设
flex-grow: 1; flex-basis: 0，它们将等分父容器（无视自身内容尺寸） - 若需某一项占 2/3、另一项占 1/3，可分别设
flex: 2 0 0和flex: 1 0 0（flex是flex-growflex-shrinkflex-basis的简写）
为什么用 flex: 1 而不是 flex-grow: 1？
flex: 1 看似简洁，但它等价于 flex: 1 1 0%（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0%）。这里 flex-basis: 0% 在某些浏览器中可能触发计算异常，尤其在嵌套 flex 容器或高度受限场景下。更稳妥的是写全：flex: 1 0 0 或分开写 flex-grow: 1; flex-shrink: 0; flex-basis: 0。
-
flex-shrink: 0防止内容多时被压缩（比如文字换行被强制截断） -
flex-basis: 0比0%更可靠——它明确表示“不预留基础尺寸”，避免百分比依赖父容器未确定尺寸时的计算歧义 - 注意：设
flex-basis: 0后，width/height声明会被忽略（除非是min-width等约束）
横向撑满 vs 纵向撑满，写法有区别吗？
没有本质区别，但方向取决于父容器的 flex-direction。默认 row 时，flex-grow 影响宽度；设为 column 时，影响高度。关键点在于：父容器必须有明确尺寸（比如 width: 100% 或 height: 300px），否则“撑满”无参照。
- 横向撑满常见于导航栏、卡片列表：父容器设
display: flex，子项设flex: 1 0 0 - 纵向撑满常见于全屏布局（如侧边栏+主内容区）：父容器需设
height: 100vh或继承高度，且flex-direction: column - 若父容器高度由内容撑开（如没设
height），子项设flex-grow: 1不会生效——因为“剩余高度”为 0
常见失效场景和排查顺序
元素没撑满，优先检查这四点，而不是反复调 flex-grow：
- 父容器是否漏了
display: flex？仅子项设 flex 属性无效 - 父容器是否有固定宽/高？
flex-grow不会强行拉伸父容器 - 子项是否设置了
max-width/max-height？它会截断 flex 分配结果 - 是否存在 margin/padding/border？它们占用空间但不参与
flex-basis计算，容易误判“撑不满”是 flex 问题，其实是盒模型挤占了空间
最简验证法：
parent { display: flex; border: 1px solid red; }<br>child { flex: 1 0 0; background: #eee; }
—— 边框能立刻暴露父容器实际尺寸是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
