如何使用 CSS flex 布局实现左右分区同高？

css flex 布局左右分区同高

在使用 flex 布局创建左右分区的页面时，有时需要左右分区的高度一致。通常情况下，flex 项会自动适应其内容的高度，导致分区高度不一致。要解决这个问题，有以下两种方法：

基于当前结构的方法：

1. 给 rht 和 lft 盒子添加 height: min-content;。这将使 flex 盒子根据子盒子的内容进行撑开。
2. 使用 jquery 获取 rht 的高度并将其分配给 lft 子盒子 div：

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

使用新的结构实现：

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

重新设计结构，使用固定高度的容器包裹 flex 布局，然后将 flex 布局盒子设置为 height: min-content;。例如：

<div class="content">
  <div class="lft">
    <div style="height: 100%; background: #d1b0b0;">lft</div>
  </div>
  <div class="rht">
    <div style="height: 300px;">rht 1</div>
    <div style="height: 300px;">rht 2</div>
    <div style="height: 300px;">rht 3</div>
    <div style="height: 300px;">rht 4</div>
    <div style="height: 300px;">rht 5</div>
  </div>
</div>

使用这种结构，无论 rht 的内容有多高，两个分区的边框都将始终达到相同的最大高度。

以上就是如何使用 CSS flex 布局实现左右分区同高？的详细内容，更多请关注其它相关文章！