弹性布局 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex弹性布局justify-content</title>
		<style>
			.container1{
				margin: 10px auto;
				background-color: #FFC9C9;
				border: 4px solid #F4A5A5;
				border-radius: 8px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content:flex-start;
				align-items: center;
			}
			.container2{
				margin: 10px auto;
				background-color: #FFC9C9;
				border: 4px solid #F4A5A5;
				border-radius: 8px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content:flex-end;
				align-items: center;
			}
			.container3{
				margin: 10px auto;
				background-color: #FFC9C9;
				border: 4px solid #F4A5A5;
				border-radius: 8px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.container4{
				margin: 10px auto;
				background-color: #FFC9C9;
				border: 4px solid #F4A5A5;
				border-radius: 8px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.container5{
				margin: 10px auto;
				background-color: #FFC9C9;
				border: 4px solid #F4A5A5;
				border-radius: 8px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			div[class^=item]{
				background-color: #B2F2BB;
				border: 4px solid #9AC190;
				border-radius: 4px;
				margin-right: 10px;
				height: 50px;
			}
			.item1{
				width: 100px;
			}
			.item2{
				width: 50px;
			}
			.item3{width: 150px;}
		</style>
	</head>
	<body>
		<h1>flex-start</h1>
		<div class="container1">
			<div class="item1"></div>
			<div class="item2"></div>	
			<div class="item3"></div>
		</div>
		<h1>flex-end</h1>
		<div class="container2">
			<div class="item1"></div>
			<div class="item2"></div>	
			<div class="item3"></div>
		</div>
		<h1>flex-center</h1>
		<div class="container3">
			<div class="item1"></div>
			<div class="item2"></div>	
			<div class="item3"></div>
		</div>
		<h1>space-between</h1>
		<div class="container4">
			<div class="item1"></div>
			<div class="item2"></div>	
			<div class="item3"></div>
		</div>
		<h1>space-around</h1>
		<div class="container5">
			<div class="item1"></div>
			<div class="item2"></div>	
			<div class="item3"></div>
		</div>
	</body>
</html>

弹性布局

![img](file:///D:\文档\Tencent Files\3277128397\nt_qq\nt_data\Pic\2026-06\Ori\0e9aadf6bac422e28251440b202bdf3d.png)

posted @ 2026-06-26 09:35  -王心雨-  阅读(3)  评论(0)    收藏  举报