flex布局尝试

最新推荐文章于 2025-05-19 15:47:44 发布

松鼠陛下

最新推荐文章于 2025-05-19 15:47:44 发布

阅读量184

点赞数

分类专栏：前台 CSS

本文链接：https://blog.youkuaiyun.com/songshuguowang/article/details/104752676

版权

前台同时被 2 个专栏收录

28 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

一个新项目，拿的element-ui-admin做的模板

因为项目需求两级导航菜单，不得已需要对页面布局重构

尝试了flex布局，完美解决

效果大概如下，flex套了好几层，但是好用呀

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex布局</title> 
<style> 
.div0
{
	display:flex;
	flex-direction:column;
	background: #ccc;
	height: 400px;	
	overflow: auto;
}
.div-top{
	flex:0 0 auto;
	background: #ddd;
	height: 60px;
}
.div-bottom{
	flex:1 1 auto;
	background: #eee;
	display:flex;
	flex-direction:row;
	overflow: auto;
}
.div-left{
	flex:0 0 auto;
	background: #aaa;
	width:120px;
}
.div-right{
	flex:1 1 auto;
	background: #eee;
	display:flex;
	flex-direction:column;
}
.div-tag{
	flex: 0 0 auto;
	background: #cfcfcf;
}
.div-show{
	flex: 1 1 auto;
	overflow: auto;
	
}
</style>
</head>
<body>

<div class="div0">
	<div class="div-top">一级导航</div>
	<div class="div-bottom">
		<div class="div-left">二级导航</div>
		<div class="div-right">
			<div class="div-tag">标签栏</div>
			<div class="div-show">
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
				页面区域<br>
			</div>
		</div>
	</div>
</div>
</body>
</html>