flex: 1 0 0、box-sizing: border-box 和 flex-wrap: nowrap 三者组合，是唯一能够稳定模拟 display: table-cell 等宽效果的关键方案。如果只写 flex: 1，最终效果必然与预期相去甚远。
为什么 flex: 1 不等于等宽？
许多开发者误以为 flex: 1 会让子元素均分父容器宽度，但实际情况并非如此。该简写实际等价于 flex: 1 1 0%——浏览器会优先根据子元素的内容宽度分配空间（例如“用户名”比“ID”更长，就会占据更多份额），随后再将剩余空间进行平均分配。最终导致内容较宽的列更宽，内容较窄的列虽然获得部分剩余空间，但整体视觉根本无法实现等宽效果。
要实现真正的等宽，前提是所有子项的初始宽度必须相同。因此 flex-basis 需要显式设置为 0 或 0px。以下是几个关键区别：
flex: 1→ 等效flex: 1 1 0%，起始宽度受内容影响，导致分布不均匀flex: 1 0 0→ 强制所有子项从零宽度出发，随后严格均分父容器的总宽度- 若某个子项内容过长且未做截断处理，仍可能撑破布局——这并非 flex 本身的缺陷，而是内容控制环节未能跟上
border 导致最后一列换行怎么办？
这是实践中极易被忽略的陷阱。在默认 box-sizing: content-box 模式下，border 和 padding 会额外叠加到 flex-basis 之外。例如，四个 flex: 1 0 0 的子项本应恰好占满 100% 宽度，但每个加上 1px 边框后，总宽度立刻增加了 8px，导致最后一列被迫换行。
解决办法其实很简单：
- 为所有子项设置
box-sizing: border-box，使边框和内边距占据flex-basis内部的空间 - 父容器务必设置
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 的“等宽”是渲染层的强制对齐。一旦内容不可控、边界条件未封死——例如遗漏了 box-sizing、未设置 min-width: 0——最终效果便会立刻偏离预期。只要把握好这些关键要点，等宽布局就能稳如磐石。
