CSS多列布局等分布局,使用flex

最新推荐文章于 2024-04-01 10:39:31 发布

原创最新推荐文章于 2024-04-01 10:39:31 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS 等分布局 flex

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

布局

13 篇文章

订阅专栏

本文介绍如何使用Flex布局创建三栏等宽度的网页布局。通过设置.container为display:flex，.left、.center和.right的flex均为1，实现响应式布局。适用于现代浏览器，但兼容性不佳。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多列布局等分布局</title>
		<!-- 使用flex布局,但是兼容性不是很好 -->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			.parent{
				width: 100%;
				height: 100%;
				display: flex;
				background-color: aqua;
				flex: 3;
			}
			.left{
				flex: 1;
				background-color: blue;
			}
			.center{
				flex: 1;
				background-color: red;
			}
			.right{
				flex: 1;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="left">
				我在左侧
			</div>
			<div class="center">
				我是居中
			</div>
			<div class="right">
				我在右侧
			</div>
		</div>
	</body>
</html>