flex-grow按剩余空间×权重分配而非百分比，需显式设flex-basis:0（如flex:1 1 0）避免auto导致内容依赖；混用width与flex-grow易布局断裂；IE11存在计算偏差，应规避精确控制。flex-grow 计算结果和百分比不一致？别信直觉，看浏览器怎么算Flex 容器里设 flex-grow: 1 和 width: 33.33% 看似等效，实际布局常错位——根本原因是 flex-grow 不按百分比分配空间，而是按「剩余可用空间 × 权重比例」再减去元素自身基础尺寸后分配。比如三个子项都设 flex-grow: 1，但其中一项有 min-width: 200px，另一项内容撑开到 150px，那它们实际占宽就不是 1/3，而是：先扣掉所有子项的 flex-basis（默认为 auto，即内容宽度），再把剩下的空间三等分，最后加回去。用 flex-grow 前，务必显式设 flex-basis（如 flex: 1 1 0），否则 auto 会引入不可控的内容依赖想严格按百分比控制，直接用 width + flex-shrink: 0，但注意这会禁用收缩，可能溢出容器flex-grow 的值只是权重比，flex-grow: 2 和 flex-grow: 4 效果等同于 1 和 2，别盲目堆数字flex-basis 设成 0 还是 auto？影响空间是否计入初始尺寸flex-basis 是 flex-grow 计算的起点。设成 0（如 flex: 1 1 0）意味着“忽略内容宽度，从零开始分剩余空间”；设成 auto（默认）则先按内容宽占位，再分剩余空间——后者才是多数人踩坑的源头。常见错误现象：flex-grow: 1 的卡片文字多时变宽、文字少时变窄，看似响应式，实则是 flex-basis: auto 在捣鬼。立即学习“前端免费学习笔记（深入）”； 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能