flex三列布局

最新推荐文章于 2025-05-30 11:58:14 发布

你真好看l

最新推荐文章于 2025-05-30 11:58:14 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_40052011/article/details/103223895

css 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了一种使用Flex布局实现三栏布局的方法，重点在于如何通过设置flex属性使中间栏自适应宽度，同时保持左栏和右栏的固定宽度。文章通过具体的HTML和CSS代码示例展示了这一技巧。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#container{
				display: flex;
			}
			.left,.right{
				background-color: #DAA520;
				width: 300px;
			}
			.middle{
				background-color: #7FFFD4;
				flex:1; /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。flex-grow属性定义项目的放大比例，宽度比例（中间列自动填充）*/
				order: 2;/*order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0*/
			}
			.right{
				order: 3;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="middle">
				middle
			</div>
			<div class="left">
				<h1>left</h1>
				<h1>left</h1>
				<h1>left</h1>
			</div>
			<div class="right">
				right
			</div>
		</div>
	</body>
</html>

在这里插入图片描述