border-collapse对Flex容器无效，因其仅适用于表格显示类型；负margin是视觉模拟边框合并的权宜之计，存在溢出、换行偏移、缩放失准等风险；推荐改用grid布局或伪元素方案。
为什么不能直接用 border-collapse 在 Flex 容器上
因为 border-collapse 是表格专属属性，只对 display: table、table-cell 等表格相关值生效。给 display: flex 的容器加 border-collapse: collapse 完全无效——浏览器会忽略它，边框照常分离显示。
用负 margin 模拟边框合并的核心逻辑
本质是让相邻子项的边框“视觉重叠”，靠外边距反向抵消间距。这不是真正合并边框计算，而是视觉欺骗，但足够应对多数卡片式、网格式列表场景。
- 所有子项统一设单侧边框（如
border-right: 1px solid #ddd和border-bottom: 1px solid #ddd） - 用
:last-child移除最后一列的border-right、最后一行的border-bottom - 关键一步：给子项加
margin-right: -1px和margin-bottom: -1px，让边框像素级贴合 - 必须配合
box-sizing: border-box，否则负 margin 可能引发布局错位
实际代码中容易踩的坑
负 margin 看似简单，但组合 flex 布局时极易出问题：
- 父容器没设
overflow: hidden时，负 margin 可能导致子项溢出不可见（尤其在响应式换行后） -
flex-wrap: wrap下，margin-bottom: -1px会让下一行首项向上偏移，需额外用margin-top: 1px补偿 - 边框颜色/宽度不一致时，负 margin 无法解决“粗细突变”——比如某列用
2px，其他用1px，视觉上仍是双线感 - 缩放或高清屏（dpr > 1）下，
-1px可能不够精确，建议用calc(-1px / var(--dpr, 1))动态适配（需 JS 注入变量）
比负 margin 更稳的替代方案
如果项目需要长期维护或支持复杂交互，不推荐强依赖负 margin：
- 用伪元素画线：
.flex-container::before绘制横向网格，::after绘制纵向网格，完全脱离子项边框控制 - 改用
display: grid+grid-gap: 0，再通过border控制单侧，语义更清晰、兼容性更好 - 真要表格语义和边框合并，就老实用
<table>，内部单元格用 <code>display: flex做内容排版——border-collapse和 flex 可共存，只是层级不同负 margin 是权宜之计，它绕开了 CSS 边框合并的底层机制，所以任何涉及动态列数、内容高度不均、或需要打印导出的场景，都可能暴露脆弱性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
