flex:1;的含义

最新推荐文章于 2024-09-03 12:52:03 发布

啊啊啊是是我

最新推荐文章于 2024-09-03 12:52:03 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/u013665597/article/details/102859601

版权

当中间内容多到屏幕底部的适合，黄色区域移出屏幕外，继续往下扩大中间内容区域
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
			
				margin: 0;
				padding: 0;
				height: 500px;
			}
			.fater{
				
					min-height: 100%;
					display: flex;
					flex-direction: column;
					
					
				
			}
			.view1{
				background: #bfa;
			}
			
			.view2{
				background: #333;
				flex: 1;
				
			}
			.view3{
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="fater">
			<div class="view1">
				aa
			</div>
			<div class="view2">
				aassasdasfasfasfaassasdasfasfasfaassasdasfasfasf
				a
			</div>
			<div class="view3">
				sss
			</div>
		</div>
	</body>
</html>