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

golang学习网今天将给大家带来《如何使用 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 布局实现左右分区同高？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！