优先用gap替代border实现等距网格，移除item边框改用outline或background+padding模拟；必须用border时，统一box-sizing: border-box并配合精确calc计算flex-basis。
Flex网格边框重叠导致视觉断开怎么办
Flex布局中直接给flex-item加border，再用flex-wrap: wrap，会发现相邻项的边框紧贴、视觉上“连成一片”，但换行后第一行末尾和第二行开头之间出现明显缝隙——这不是bug，是盒模型+flex间距计算的必然结果。
根本原因是：每个item的border-box尺寸参与flex分配，而gap不作用于flex-wrap的行间，只作用于同一行内（CSS规范限制）。
- 别用
margin模拟边框（易引发换行错位、响应式失效） - 优先启用
gap+ 移除item自身border，改用outline或父容器border裁剪 - 若必须保留
border，给所有item统一设box-sizing: border-box，并手动用负margin抵消间隙（仅限固定列数场景）
用gap替代border实现真正等距网格
gap是目前最干净的解法，但它要求父容器是display: flex且启用了flex-wrap，同时item不能有影响布局的margin干扰。
注意：IE完全不支持gap，如需兼容，得回退到grid或JS补丁；现代项目可放心用。
- 父容器设
display: flex+flex-wrap: wrap+gap: 12px - 每个item去掉
border，改用background+padding模拟“带边框”的视觉块 - 若仍需真实边框，用
outline: 1px solid #ccc代替border（outline不占布局空间，不会撑开gap）
flex-wrap换行时首尾item边框对不齐的修复
当一行不满、自动换行时，最后一项右边界和下一行第一项左边界常出现像素级偏移，尤其在缩放或subpixel渲染下明显。这通常源于flex容器的justify-content值与item宽度非整除导致的舍入误差。
- 确保所有item宽度为固定值（如
width: calc(33.333% - 8px)），避免百分比+gap组合引发累积误差 - 禁用
justify-content: space-between或space-around，改用flex-start（最稳定） - 对关键item加
flex-shrink: 0，防止压缩变形 - 必要时用
transform: translateZ(0)触发硬件加速，减少亚像素模糊
border-box + flex-basis配合gap的精确控制公式
要让n列网格在任意宽度下都保持gap一致、边框完整，得手动算flex-basis，不能只靠width。
例如3列、gap=12px、边框1px：每项实际可用宽度 = (100% - 2 * 12px) / 3，再减去左右border共2px → flex-basis: calc((100% - 24px) / 3 - 2px)。这个计算必须写死在CSS里，不能靠JS动态插值。
- 公式通用形式：
flex-basis: calc((100% - (N-1) * GAP) / N - 2 * BORDER_WIDTH) - 务必配合
flex: 0 1 [上面那个calc值]，禁止伸缩 - 如果border只出现在内部（即外层无边框），可省略
- 2 * BORDER_WIDTH部分
复杂点在于：只要列数或gap变，整个公式就得重算；border位置（内外）、是否圆角、是否阴影，都会影响最终像素对齐——这些细节没被CSS自动处理，得人工盯住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
