flex-grow与flex-basis比例分配技巧

想让 flex-grow 真正按预期比例分配空间？关键不在 grow 值本身，而在于统一“起跑线”——必须将 flex-basis 显式设为 0（而非默认的 auto），否则内容宽度或 width 会抢占初始空间，导致比例失真；推荐使用 `flex: 2 0 0` 这类简写实现精准的 2:3:5 等比布局，既响应式强又兼容 IE11，而忽视 flex-basis 的细节，正是无数开发者调试数小时却仍无法复现设计稿比例的根本原因。

flex-grow 不生效？先确认 flex-basis 是 auto 还是 0

很多情况下 flex-grow 看似没起作用，其实是被 flex-basis 的初始值“锁住”了。默认 flex-basis 是 auto，它会先按元素内容宽度（或设了 width 的值）来占位，再把剩余空间按 flex-grow 分——这容易导致比例失真。

想严格按比例分配宽度，必须显式设 flex-basis: 0，让所有 flex 项起始“零宽度”，再由 flex-grow 完全主导分配逻辑。

• flex-basis: auto → 尊重内容宽 / width，再分剩余空间
• flex-basis: 0 → 忽略原始尺寸，纯按 flex-grow 比例切分容器总宽
• 推荐写法：flex: 1 0 0（即 flex-grow: 1; flex-shrink: 0; flex-basis: 0）

用 flex 实现 2:3:5 的等比宽度布局

比如三个子项要占容器的 20%、30%、50%，不能靠百分比 width（响应性差），而应靠 flex-grow 比例 + flex-basis: 0。

.container {
  display: flex;
}
.item-1 { flex: 2 0 0; }
.item-2 { flex: 3 0 0; }
.item-3 { flex: 5 0 0; }

这里数字 2/3/5 是相对权重，浏览器会自动归一化计算：2/(2+3+5)=20%，3/10=30%，依此类推。注意不要写成 flex-grow: 2px 或带单位的值——它只接受无单位数字。

flex-basis 设为具体长度（如 100px）时会发生什么

一旦 flex-basis 是固定值（比如 100px），flex-grow 就只在“超出 100px 后的剩余空间”里起作用，不再是纯比例控制。

• 若容器宽 600px，三个项都设 flex: 1 0 100px → 先各占 100px（共 300px），剩下 300px 再三等分 → 最终各 200px
• 但若某项内容很长（比如文本撑到 150px），而 flex-basis: auto，它可能直接突破比例 → 此时 flex-basis: 0 才能强制“一切从零开始算”
• 移动端常踩坑：图片或按钮自带固有宽，不设 flex-basis: 0 就会破坏比例

IE11 兼容 flex-grow 比例分配的注意事项

IE11 对 flex-grow 支持基本可用，但有个关键限制：必须显式写 flex-basis，不能省略。只写 flex-grow: 2 在 IE11 下会被忽略。

• ✅ 安全写法：flex: 2 0 0 或 flex-grow: 2; flex-shrink: 0; flex-basis: 0
• ❌ 危险写法：flex-grow: 2 单独使用（IE11 不识别）
• 如果项目还需支持 IE11，建议统一用 flex 简写，避免拆开写

真正难的不是写对语法，而是意识到：比例分配的前提是“起点一致”。只要有一个子项的 flex-basis 没归零，整个比例就可能悄悄偏移。

以上就是《flex-grow与flex-basis比例分配技巧》的详细内容，更多关于的资料请关注golang学习网公众号！