flex弹性盒子实现圣杯布局

最新推荐文章于 2024-09-09 17:19:02 发布

秋叶原の黑猫

最新推荐文章于 2024-09-09 17:19:02 发布

阅读量390

点赞数

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/corruptwww/article/details/125748229

版权

前端专栏收录该内容

33 篇文章 1 订阅

订阅专栏

这里推荐一个我个人比较喜欢的圣杯布局，即当总宽度收缩时，左右两边优先收缩，最后收缩中间部分。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.wrap{
				display:flex;
				flex-direction:row;
				margin-top:20px;
			}
			.center{
				width:800px;
				text-align:center;
				background:#ccc;
			}
			.left,.right{
				/*flex-grow 属性用于设置或检索弹性盒的扩展比率。*/
	                        flex-grow: 1;
	                        line-height: 30px;
	                        background:red;
	                }
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">left</div>
			<div class="center">center</div>
			<div class="right">right</div>
		</div>
	</body>
</html>