技術標籤：css常用佈局csshtml

說明

本次佈局只是給css和html初學者的一個佈局思路

效果展示

佈局分析

有兩種佈局思路

第一種：不使用 justify-content: space-between; 屬性

第二種：使用 justify-content: space-between; 屬性

佈局實現

第一種

HTML部分：

使用標籤較少一些

<div class="container">
	<div class="header_wrap">
		<div class="header_round"
 
></div>
		<div class="header_round"></div>
		<div class="header_round"></div>
		<div class="header_btn">
			<button>AWESOME</button>
		</div>
	</div>
</div>

CSS部分：

.container {  // 這個只是讓內容居中
	display: flex;
	align-
 
items: center;
	flex-direction: column;
	font-size: 12px;
}

.header_wrap {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	display: flex;
	padding: 8px 16px;
	width: 600px;
}

.header_round {
	background-color: rgb(255, 65, 54);
	border-radius: 100%;
	height:
 
 16px;
	margin-right: 4px;
	width: 16px;
}

.header_btn {
	margin-left: auto; // 主要是靠這個屬性把中間空白區撐起來
}

.header_btn button {
	background-color: rgb(0, 68, 158);
	border-color: transparent;
	border-radius: 4px;
	color: rgb(255, 255, 255);
	cursor: pointer;
	padding: 4px 8px;
}

第二種

HTML部分：

個人感覺第二種方法比較有模組化的佈局方式

<div class="container">
	<div class="header_wrap">
		<div class="header_round_wrap">
			<div class="header_round"></div>
			<div class="header_round"></div>
			<div class="header_round"></div>
		</div>
		<div class="header_btn">
			<button>AWESOME</button>
		</div>
	</div>
</div>

CSS部分：

.container {
	/* 這個只是讓內容居中 */
	display: flex;
	align-items: center;
	flex-direction: column;
	font-size: 12px;
}

.header_wrap {
	align-items: center;
	justify-content: space-between;  // 靠的這個屬性讓內部左右的兩個模組前後頂邊佈局
	background-color: rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	display: flex;
	padding: 8px 16px;
	width: 600px;
}

.header_round_wrap{
	display: flex;
}

.header_round {
	background-color: rgb(255, 65, 54);
	border-radius: 100%;
	height: 16px;
	margin-right: 4px;
	width: 16px;
}

.header_btn button {
	background-color: rgb(0, 68, 158);
	border-color: transparent;
	border-radius: 4px;
	color: rgb(255, 255, 255);
	cursor: pointer;
	padding: 4px 8px;
}

完~