在 Flex 布局中为相邻项添加边框时，若未正确处理盒模型，会导致宽度溢出、换行或错位；核心解法是统一使用 box-sizing: border-box，使边框包含在设定的尺寸内。
在 flex 布局中为相邻项添加边框时，若未正确处理盒模型，会导致宽度溢出、换行或错位；核心解法是统一使用 `box-sizing: border-box`，使边框包含在设定的尺寸内。
在 Flex 容器中为两个并排子项（如 .flex-item1 和 .flex-item2）添加中间分隔边框，看似简单，却常因 CSS 盒模型默认行为而失败。问题根源在于：当设置 flex: 1 50% 时，浏览器默认采用 box-sizing: content-box —— 此时 50% 仅指内容区宽度，1px 左右边界会额外增加 2px 总宽（左右各1px），导致两项总宽超过 100%，从而破坏水平排列，甚至触发换行或滚动。
✅ 推荐方案：全局启用 border-box
这是最稳健、可维护性最强的做法。在样式重置阶段即统一盒模型：
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
height: 100vh;
overflow: hidden;
}
.flex-item1 {
flex: 1 50%;
background-color: aqua;
border-right: 1px solid black; /* 仅右侧边框，作为分隔线 */
}
.flex-item2 {
flex: 1 50%;
background-color: white;
/* 不加左边界，避免双线重叠 */
}? 提示：此处推荐使用
border-right而非border，精准控制分隔位置，避免两侧重复描边。
⚠️ 备选方案：手动计算减去边框宽度（不推荐）
若因历史项目限制无法修改全局 box-sizing，可改用 calc() 动态修正宽度：
.flex-item1 {
flex: 1 calc(50% - 1px); /* 减去自身右边框占用的 1px */
background-color: aqua;
border-right: 1px solid black;
}
.flex-item2 {
flex: 1 50%; /* 无需减边框，因左侧无边框 */
background-color: white;
}但该方式易出错（如多列、响应式场景需反复调整）、可读性差，且难以扩展，仅作兼容性兜底。
? 关键总结
- 永远优先设置
* { box-sizing: border-box }（或至少作用于.flex-container及其子项）； - 分隔边框建议只加在「前一项的右侧」或「后一项的左侧」，避免双边叠加；
- 避免对
flex: 1 50%的元素直接设全向border，否则必须同步调整flex-basis； - 使用
gap属性（现代浏览器支持）是更语义化、无盒模型干扰的替代方案（如gap: 2px），但注意它生成的是透明间隙而非可见边框。
通过统一盒模型 + 精准定位边框方向，即可轻松实现干净、稳定、可扩展的 Flex 项间分隔效果。
