如何使用CSS Flex实现类似Table的等宽单元格效果

结论是flex: 1 0 0 + box-sizing: border-box + flex-wrap: nowrap 是唯一能稳定复现 display: table-cell 等宽行为的组合；flex: 1 因等价于 flex: 1 1 0%，浏览器先按内容宽度占位再分剩余空间，导致内容宽者更宽，并非视觉等分，必须设 flex-basis: 0 并配合 box-sizing: border-box 和 flex-wrap: nowrap 才能真正等宽。

直接说结论：flex: 1 0 0 + box-sizing: border-box + flex-wrap: nowrap 是唯一能稳定复现 display: table-cell 等宽行为的组合，只写 flex: 1 必然失效。

为什么 flex: 1 不等于等宽？

它其实是 flex: 1 1 0% 的简写，浏览器先按内容宽度占位（比如“用户名”比“ID”宽），再把剩余空间均分——结果是“内容宽的更宽，内容窄的略宽”，根本不是视觉等分。真正等宽的前提是所有子项起始宽度一致，flex-basis 必须显式设为 0 或 0px。

• flex: 1 → flex-basis: 0%，但实际渲染仍受内容影响
• flex: 1 0 0 → 强制所有子项从 0 宽度开始，再均分父容器总宽
• 如果某项内容超长且没截断，依然会撑破布局，这不是 flex 的问题，而是内容控制缺失

border 导致最后一列换行怎么办？

这是最常被忽略的坑：默认 box-sizing: content-box 下，border 和 padding 会额外加在 flex-basis 之外，4 个 flex: 1 0 0 子项本该刚好填满 100%，加上 1px 边框后总宽就超了 8px，触发换行。

• 必须给子项加 box-sizing: border-box
• 父容器要加 flex-wrap: nowrap，否则超宽会自动折行，破坏“单行表格”语义
• 别用 margin 模拟边框间距，改用 gap（现代方案）或确保 gap 值已计入布局计算

如何让文字不撑破单元格？

即使 flex: 1 0 0 和 box-sizing: border-box 都写了，长文本（如 URL、未换行中文）仍会突破宽度限制。这不是 flex 计算错误，而是文本默认可无限延展。

立即学习“前端免费学习笔记（深入）”；

• 加 white-space: nowrap 防止换行
• 加 overflow: hidden 裁剪溢出部分
• 加 text-overflow: ellipsis 显示省略号（需同时满足前两项）
• 避免在子项里嵌套 display: table 或 float 元素，它们会破坏 flex 的伸缩逻辑

真正难的不是写对那三行 CSS，而是意识到：flex 的“等宽”本质是数学均分，而 table-cell 的“等宽”是渲染层强制对齐。一旦内容不可控、边界条件没封死（比如没设 min-width: 0、漏了 box-sizing），结果就会立刻偏离预期。