通过将父容器设为 display: flex，可使子列自动等高，从而确保左右边框（如导航栏右侧边框与内容区左侧边框）无缝延伸至容器最大高度，彻底解决因内容长度不一导致的边框断裂问题。
通过将父容器设为 `display: flex`，可使子列自动等高，从而确保左右边框（如导航栏右侧边框与内容区左侧边框）无缝延伸至容器最大高度，彻底解决因内容长度不一导致的边框断裂问题。
在基于 Foundation 的响应式布局中，.row 容器内包含 .navs（侧边导航）和 .content（主内容）两个列，二者内容高度常不一致。若仅对单个列设置 border-left 或 border-right，边框只会撑开到该列自身内容高度，导致视觉上出现“断开”的空白缺口——尤其当该布局被复用在多个页面（通过 include 文件引入）时，问题更显突出。
推荐解决方案：启用 Flexbox 布局
只需为 .row 添加 display: flex，浏览器会自动将所有直接子元素（即两列）拉伸至同一高度（即最高子项的高度），此时应用的边框自然覆盖整个共享侧边：
.row {
display: flex;
}
.navs {
border-right: 1px solid #000;
}
.content {
border-left: 1px solid #000;
}✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- 无需 JavaScript 或额外 DOM 结构，纯 CSS 解决；
- 兼容现代浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+），Foundation 6+ 默认支持；
-
不影响 Foundation 响应式类（如
.medium-3、.medium-9仍生效，Flexbox 与 Grid 类属性共存无冲突）； - 语义清晰、维护性强：统一在布局层控制高度对齐，避免为每页单独 hack。
⚠️ 注意事项：
- 若需在小屏幕下退回堆叠布局（如移动端单列显示），应配合媒体查询重置
display：@media screen and (max-width: 640px) { .row { display: block; } } - 避免在
.row上同时使用flex和 Foundation 的grid-x（v6.5+）——二者功能重叠，建议择一使用；若沿用 Foundation 旧版.row，Flex 方案可安全叠加。
此方法简洁、健壮，是解决多列等高与垂直分隔线对齐问题的最佳实践。
