必须设置box-sizing: border-box，否则border会增加元素实际尺寸导致错位或溢出；推荐全局重置**, *::before, *::after { box-sizing: border-box; }，并用gap替代margin控制间距，IE11需改用flex: 0 0明确值并手动减去border宽度。
flex布局中带border的元素错位或溢出怎么办
直接原因：border会增加元素实际尺寸，而默认box-sizing是content-box，导致width: 100%或flex: 1计算时未包含边框，容器撑开、换行、对不齐。
- 所有带
border的flex子项，必须显式设置box-sizing: border-box - 否则即使
flex: 1，多个并列元素总宽度也会超过父容器（比如三列各flex: 1，但因边框额外加了6px，就可能折行） - 推荐在重置样式或通用规则里统一写：
*, *::before, *::after { box-sizing: border-box; }
flex-wrap: wrap下带border的卡片间距不均匀
常见现象：卡片设了border: 1px solid #ccc，用flex-wrap: wrap排成网格，但左右/上下间隙不一致，尤其最后一行卡片右边缘多出空白。
- 不要靠
margin模拟间隔——边框会让margin叠加混乱；改用gap（Flexbox原生间隙属性） -
gap自动避开边框，只作用于元素内容区之间，且兼容现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+） - 示例：
.container { display: flex; flex-wrap: wrap; gap: 12px; /* 代替 margin-right/bottom */ } .card { flex: 1 1 calc(33.333% - 12px); /* 减去 gap 占用，不是减 border */ border: 1px solid #ddd; box-sizing: border-box; }
IE11里flex + border彻底错乱的补救方式
IE11的Flex实现有严重box-sizing和flex-basis解析缺陷，即使写了border-box，flex: 1仍常把边框算进伸缩基准，导致溢出或塌陷。
- 放弃
flex: 1，改用明确flex-basis（如flex: 0 0 33.333%）并确保父容器width固定 - 给每个子项加
max-width: 100%防溢出 - 必要时降级为
display: inline-block+vertical-align: top，配合font-size: 0清除间隙 - 关键修复代码：
.ie11-flex-item { flex: 0 0 calc(33.333% - 2px); /* 手动减去左右 border 总和 */ max-width: 100%; box-sizing: border-box; border: 1px solid #ddd; }
带border的flex布局，核心从来不是“怎么排”，而是“尺寸归属是否清晰”——box-sizing没设对，后面所有flex比例、gap、响应式计算都会偏移。尤其当边框粗细不一或动态切换时，漏掉border-box就是埋雷。
立即学习“前端免费学习笔记（深入）”；
