17370845950

实现等比例分栏的关键是使用 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 的自动分配，等比例分栏自然就稳了。