CSS Flex实现表格等宽单元格的布局方法

为什么 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——最终效果便会立刻偏离预期。只要把握好这些关键要点，等宽布局就能稳如磐石。