css弹性盒圣杯布局案列

最新推荐文章于 2024-10-31 15:02:05 发布

Stirve unremitting

最新推荐文章于 2024-10-31 15:02:05 发布

阅读量108

点赞数

分类专栏：笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/105071467

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		html,body{height: 100%;}
		*{margin: 0;padding: 0;}
		.box{display: flex;/*flex-direction: column;*/height: 600px;}
		.box1{width:150px;background: tomato;height: 100%;}
		.box2{background: silver;flex:1;height: 100%;}
		.box3{width:150px;background: navajowhite;height: 100%;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
		
</html>