如何在BS5/Angular13中实现类Midnight Commander双栏布局

完全不需要额外引入专门的flex布局工具库，你甚至只写最基础的原生stylesheet就能实现需求；如果用基础flex语法写，代码会更简洁，也不需要深入啃完flex的所有特性，记3个常用属性足够。

纯基础CSS实现（不用flex） #

你只要靠常规块级元素+浮动就能搭出结构，全程不需要特殊布局属性：

• 最外层组件容器设固定宽高，全局加box-sizing: border-box，避免边框、内边距把尺寸撑乱
• 顶部工具箱设为块级元素，给定固定高度，宽度100%占满容器顶部，操作按钮按正常流式布局放就行
• 底部区域高度设为「外层容器总高度 - 顶部工具箱高度」，内部两个左右面板设左浮动，各占50%宽度（要留间隙就适当缩宽度加外边距），给面板加边框，设置overflow: auto，内容超出时就会自动出现滚动条
• 最后给底部容器加清除浮动规则，避免高度塌陷即可

基础flex实现（更省心，推荐） #

你不需要系统研究flex的所有复杂特性，只用三个最常用的属性就能写，还不用手动算底部区域的高度：

• 最外层组件容器设display: flex; flex-direction: column;，指定为纵向弹性布局，宽高设为你要的固定值
• 顶部工具箱直接给固定高度，不需要额外布局属性
• 底部容器加flex: 1;，它会自动占满顶部工具箱剩下的所有垂直空间，再给底部容器设display: flex;，指定为横向弹性布局
• 左右两个面板各加flex: 1;，会自动平分底部区域的宽度，给面板加边框、设overflow: auto;，面板高度会自动和底部容器对齐，不需要手动计算赋值

踩坑提示：如果给左右面板加边框、内边距，一定要给面板也加上box-sizing: border-box，不然两个平分宽度的面板会因为边框占宽度，总宽度超出父容器导致折行。

内容的提问来源于stack exchange，提问作者Kal800