源码采用vue3写法实现:Panel.vue
<!--专用于布局的面板,可以无限嵌套,核心思想是保证center部分充满整个剩余空间--> <template> <div class="container"> <div class="top"> <slot name="top" /> </div> <div class="middle"> <div class="left"> <slot name="left" /> </div> <div class="center"> <slot name="center" /> </div> <div class="right"> <slot name="right" /> </div> </div> <div class="bottom"> <slot name="bottom" /> </div> </div> </template> <script setup></script> <style scoped lang="scss"> .container { //border: 1px solid red; display: flex; flex-direction: column; height: 100%; width: 100%; .middle { flex: 1; overflow-y: auto; display: flex; flex-direction: row; .center { flex: 1; overflow-y: auto; } } .top, .bottom { flex-shrink: 0; } } </style>
标签:flex,direction,center,auto,充满,html From: https://www.cnblogs.com/joeblackzqq/p/18639676