欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

flex布局尝试

程序员文章站 2024-03-18 14:06:28
...

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

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

尝试了flex布局，完美解决

效果大概如下，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>

 

相关标签： 前台 CSS

上一篇： 前端实现五子棋小游戏1（本地双人对战）

下一篇： Java分页原理

推荐阅读