三列真正等宽需设flex: 1 1 0，确保flex-basis: 0消除内容干扰；避免min-width、padding、margin及gap影响；比例分配用flex: 2 1 0等显式声明。
在 Flex 布局中，三列“等比例”但视觉上“不均匀”，通常不是 Flex 本身的问题，而是对 flex: 1 的理解或使用方式有偏差。真正让三列**按相同比例均分容器宽度**，关键不在盲目写 flex: 1，而在于控制好 flex-basis 和是否允许收缩。
为什么 flex:1 有时看起来“不等宽”？
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写。重点在 flex-basis: 0 —— 它会让元素“从零宽度开始增长”，此时三列才真正按 grow 权重均分剩余空间，效果最接近“等比例”。
但如果子项自带内容（比如文字、图片）、设置了 padding/margin、或父容器有间隙（gap）、或子项本身有最小宽度（min-width），就可能打破视觉均匀性。
确保三列真正等宽的写法
直接给每个子项设置：
-
flex: 1 1 0;（推荐）→ 显式声明flex-basis: 0，消除内容原始尺寸干扰 - 父容器加
display: flex;和gap: 8px;（如需间距），避免用 margin 挤压计算 - 移除子项的
width、min-width或过大的padding（尤其左右 padding） - 检查字体、内联元素、图片是否撑开高度/宽度导致换行或溢出
想“不等比例”反而更灵活？
如果实际需要的是 2:3:1 这样的比例，不要硬调 flex: 1，改用：
立即学习“前端免费学习笔记（深入）”；
- 第一列：
flex: 2; - 第二列：
flex: 3; - 第三列：
flex: 1;
此时所有项仍用 flex-basis: 0（即 flex: 2 = flex: 2 1 0），比例才准确。若省略 flex-shrink（如写成 flex: 2 0），则该列不会缩小，容易溢出。
调试小技巧
临时加点样式快速定位问题：
- 给父容器加
outline: 1px solid red; - 给每个子项加
outline: 1px dashed blue; - 用浏览器开发者工具检查 computed 样式里的
flex-basis和最终宽度
基本上就这些。flex 均分不难，关键是别让隐式默认值（比如 flex-basis: auto）悄悄干扰了你的预期。
