实现等比例分栏的关键是使用 flex: 1（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0）并配合容器级 gap 属性，移除子项显式 width/min-width 干扰，让 flex 容器自动均分剩余空间。
子元素无法平均分布，通常是因为没理解 flex: 1 的作用机制，或忽略了容器的 gap 与子项自身宽高设置的干扰。真正实现等比例分栏，关键不是“强行设宽度”，而是让 flex 容器主动分配剩余空间。
flex: 1 不是“占1份”，而是“弹性拉伸填满”
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写。重点在 flex-basis: 0 —— 它让子项初始宽度为 0，把全部空间交给 flex-grow 去均分。
- 如果子项写了
width: 200px或min-width，会干扰flex-basis: 0，导致不均分 - 正确做法：移除所有显式宽度，只设
flex: 1 - 多个子项都设
flex: 1，它们就会严格等宽（忽略内容宽度差异）
gap 比 margin 更干净地控制间距
用 margin 实现间隙容易引发边距叠加、首尾多留白等问题；gap 是容器级属性，专为 flex 和 grid 设计，自动避开首尾。
- 在 flex 容器上直接加
gap: 16px，子项间就有统一间隙 - 不需要给子项加
margin-right或伪元素清除 - 支持
row-gap/column-gap精细控制（如仅水平有间隙）
常见踩坑与修正示例
以下写法看似合理，实则破坏等分：
立即学习“前端免费学习笔记（深入）”；
- ❌
flex: 1; width: 100px→width覆盖flex-basis，失去弹性 - ❌
flex: 1; min-width: 120px→ 内容少时能均分，内容多时某项撑开，破坏比例 - ✅ 正确写法：
.container { display: flex; gap: 12px; }.item { flex: 1; }
基本上就这些。flex: 1 + gap 的组合，不复杂但容易忽略基础逻辑。删掉多余宽度、信任 flex 的自动分配，等比例分栏自然就稳了。
