16周弹性盒子布局

弹性盒子布局

html

<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>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>

css

div[class^=item]{
				height: 42px;
				border-radius: 4px;
				background-color: #00FFFF;
				border: 4px solid #9ac190;
				margin-right: 10px;
			}
			.item1{
				width: 100px;
			}
			.item2{
				width: 50px;
			}
			.item3{
				width: 100px;
			}
			.container1{
				margin: 0 auto;
				background-color: #FFC9C9;
				border: 4px solid #F45A5;
				border-radius: 10px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.container2{
				margin: 0 auto;
				background-color: #FFC9C9;
				border: 4px solid #F45A5;
				border-radius: 10px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			.container3{
				margin: 0 auto;
				background-color: #FFC9C9;
				border: 4px solid #F45A5;
				border-radius: 10px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.container4{
				margin: 0 auto;
				background-color: #FFC9C9;
				border: 4px solid #F45A5;
				border-radius: 10px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.container5{
				margin: 0 auto;
				background-color: #FFC9C9;
				border: 4px solid #F45A5;
				border-radius: 10px;
				width: 1000px;
				height: 100px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
posted @ 2026-06-28 22:40  feng-luo  阅读(3)  评论(0)    收藏  举报