html页面实现圣杯布局flex

最新推荐文章于 2024-07-17 16:42:38 发布

JavaYao1

最新推荐文章于 2024-07-17 16:42:38 发布

阅读量375

点赞数

分类专栏： JavaScript笔记文章标签： css

本文链接：https://blog.youkuaiyun.com/JavaYao1/article/details/109145369

版权

JavaScript笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何利用flex布局轻松实现圣杯布局。通过将父容器设为flex容器，并对子元素设定相应的宽度或高度及flex属性，可以简单地完成这一布局方式。同时提到了flex-direction属性在垂直布局时的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
	<style>
		div{
			outline: 2px solid;
			margin: 5px;
		}

		/* 以下为整个页面的布局 */
		.main{
			display:flex;
			flex-direction: column;

			height:100%;
		}

		.top, .footer{
			height: 50px;
		}

		/* 以下为中间的body布局 */
		.body{
			flex:1;

			display: flex;	
		}

		.body-main{
			flex: 1;
			background-color: yellow;
		}

		.body-left, .body-right{
			width: 100px;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="top">标题栏</div>
		<div class="body">
			<div class="body-left">左边导航栏</div>
			<div class="body-main">主内容，自动伸缩</div>
			<div class="body-right">右边提示栏</div>
		</div>
		<div class="footer">页脚栏，使用flex布局</div>
	</div>
</body>
</html>

flex布局使用的时候，把父容器用 display:flex 设置为flex容器，里面的3个DIV，把固定大小的2个DIV设置固定的高度、宽度（水平的时候设置宽度，垂直的时候设置高度），把自动伸缩的DIV设置 flex:1 即可。就是这么简单。flex-direction: column 设置3个DIV为垂直方向（设置垂直方向的时候需要设置高度为100%），默认是水平方向。