在 Flex 布局中为相邻项目添加边框时，若未正确处理盒模型，会导致总宽度超限、项目换行或重叠。核心解决方案是统一使用 box-sizing: border-box，使边框包含在设定的尺寸内。
在 flex 布局中为相邻项目添加边框时，若未正确处理盒模型，会导致总宽度超限、项目换行或重叠。核心解决方案是统一使用 `box-sizing: border-box`，使边框包含在设定的尺寸内。
在 Flex 容器中为两个并排项目（如 .flex-item1 和 .flex-item2）添加中间边框时，常见问题并非“加不了边框”，而是加了边框后布局崩溃——本该水平并列的项目意外错位、换行甚至重叠。根本原因在于 CSS 默认的 box-sizing: content-box：此时 flex: 1 50% 表示内容区占容器宽度的 50%，而 border: 1px solid black 会额外增加左右各 1px，导致实际占用宽度变为 50% + 2px。两个项目合计超过 100%，Flex 容器无法容纳，从而触发换行或溢出。
✅ 推荐方案：全局启用 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，可确保只在两项之间渲染一条清晰分隔线，语义更准确，也便于后续扩展（如三列布局时只需为前两列设右边界）。
⚠️ 备选方案：手动计算减去边框宽度（不推荐）
若因历史原因必须保留 content-box，则需显式调整 flex-basis：
.flex-item1 {
flex: 1 calc(50% - 1px); /* 左项预留 1px 给右边界 */
border-right: 1px solid black;
}
.flex-item2 {
flex: 1 50%; /* 右项无需预留，因无右侧边框 */
}
但此方式脆弱且难以维护：边框变粗、响应式断点变化时均需同步修改 calc() 表达式，易出错。
? 总结与建议
- *永远优先设置 ` { box-sizing: border-box }`** —— 这是现代 CSS 开发的标准起点，几乎所有主流框架（Bootstrap、Tailwind）均默认采用；
- 避免对多个项目同时设置相向边框（如
.item1 { border-right }+.item2 { border-left }），以防像素级双线叠加； - 在 Flex 布局中，分隔线本质是“视觉间隙”，也可考虑用
gap: 1px（需确保浏览器兼容性）或伪元素::after实现，但border-box+ 单侧边框仍是语义最清晰、兼容性最好、性能最优的解法。
