结论是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），结果就会立刻偏离预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
