flex实现两边固定中间自适应的三列布局

最新推荐文章于 2024-06-24 17:59:33 发布

qq_36716000

最新推荐文章于 2024-06-24 17:59:33 发布

阅读量1.2k

点赞数 2

分类专栏： css 文章标签： css3 flex

本文链接：https://blog.csdn.net/qq_36716000/article/details/105992433

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.nav-container {
				display: flex;
				height: 90px;
				line-height: 90px;
				font-size: 32px;
			}
			
			.nav-left {
				color: #f00;
			}
			
			.nav-title {
				flex: 1;
				text-align: center;
				background-color: #00f;
			}
			
			.nav-right {
				color: #0f0;
			}
		</style>
	</head>

	<body>
		<div class="nav-container">
			<div class="nav-left">左侧</div>
			<div class="nav-title">标题</div>
			<div class="nav-right">右侧</div>
		</div>
	</body>

</html>