如何使用 CSS Flex 实现左右布局并保持相同高度？

css flex 布局：实现左右等高布局

在使用 CSS Flex 布局时，常需将页面分割成上下两部分，下半部分又细分为左右两列。 如何确保左右两列高度一致，并添加贯穿始终的分割线？本文提供两种方案。

方案一：基于现有结构，使用 JavaScript 动态调整高度

假设已存在 .lft 和 .rht 两个容器，可以使用 JavaScript 动态获取 .rht 的高度，并应用到 .lft 上。这种方法简单直接，但依赖 JavaScript，且效率可能较低。

首先，为 .rht 设置 height: min-content;，使其高度由内容撑开。然后，使用 JavaScript 代码：

let h = $(".rht").height() + 'px'; $(".lft").css({ height: h });

此代码片段获取 .rht 的高度，并将其应用到 .lft。

立即学习“前端免费学习笔记（深入）”；

方案二：优化 html 结构，利用 CSS Flex 实现等高

为了避免 JavaScript 的依赖，并提升效率，建议优化 HTML 结构，并利用 CSS Flex 的特性来实现等高布局。

示例 HTML 结构：

<div class="wrapper">   <div class="top">导航栏</div>  <!-- 顶部导航 -->   <div class="content">     <div class="lft">左侧内容</div>     <div class="rht">右侧内容</div>   </div> </div>

对应的 CSS 代码：

.wrapper {   display: flex;   flex-direction: column; /* 垂直布局 */   height: 100vh; /* 占据整个视口高度 */ }  .top {   height: 100px; /* 顶部导航高度 */   width: 100%;   background-color: #e3e3e3; }  .content {   display: flex;   flex: 1; /* 占据剩余空间 */ }  .lft {   flex: 1; /* 占据剩余空间 */ }  .rht {   width: 600px;   flex-shrink: 0; /* 防止右侧内容压缩 */   border-left: 1px solid red; /* 分割线 */ }

这种方法中，wrapper 使用 flex 布局，content 容器也使用 flex 布局，并通过 flex: 1; 确保左右两列共享剩余空间，从而达到等高效果。 flex-shrink: 0; 防止 .rht 被压缩。

通过以上两种方法，可以有效解决 CSS Flex 布局中左右两列高度不一致的问题，并实现简洁美观的页面布局。 建议优先考虑方案二，因为它更简洁、高效且不依赖 JavaScript。