css伸缩布局display: flex

最新推荐文章于 2023-02-14 20:52:07 发布

Rose✿留白ق೨

最新推荐文章于 2023-02-14 20:52:07 发布

阅读量128

点赞数

分类专栏：微信小程序文章标签： css html

本文链接：https://blog.csdn.net/belongname_/article/details/108700290

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

指定一个父盒子为伸缩盒子，即指定：diplay: flex;

.root{
diplay: flex;
border: 2px solid #ccc;
height: 100%;
}

源代码：

	<!DOCTYPE html>
	<html>
	
	<head>
	<meta charset="UTF-8">
	<title>ZeJian的网站_阿里云服务器</title>
	
	<style>
		html,body{
			height: 100%;
		}
		
		.root{
			display: flex;
			border: 2px solid #ccc;
			height: 100%;
		}
		
		.sidebar{
			width:200px;
			
			height: 100%;
			background-color:#ff0;
		}
		
		.content{
			width:300px;
			
			height: 100%;
		 	background-color:#e0e0e0; 
			
		}
	</style>
	
	</head>
	
	<body>
		<div class="root">
		
			<div class="sidebar">
				
			</div>
			
			<div class="content">
				
			</div>
		
		</div>
	</body>
	
	</html>