首页 > 其他分享 >【html】通用布局模式,让容器充满父元素,且center部分始终充满剩余空间,可无限嵌套

【html】通用布局模式,让容器充满父元素,且center部分始终充满剩余空间,可无限嵌套

时间:2024-12-29 22:21:52浏览次数:1  
标签:flex direction center auto 充满 html

源码采用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

相关文章