如何在 Flex 布局的两个子元素之间添加分隔边框-html教程-PHP中文网

如何在 Flex 布局的两个子元素之间添加分隔边框

在 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;
}

但该方式易出错（如多列、响应式场景需反复调整）、可读性差，且难以扩展，仅作兼容性兜底。