คุณสมบัติ align-content

คุณสมบัติ align-content กำหนดการจัดแนว ขององค์ประกอบตามแกนขวางสำหรับบล็อกแบบ flex และตามแกนตั้งสำหรับกริด ใช้กับองค์ประกอบหลัก

ไวยากรณ์

selector {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

ค่า

ค่า	คำอธิบาย
`flex-start`	บล็อกถูกจัดชิดไปที่จุดเริ่มต้นของแกนขวาง (แกนตั้ง)
`flex-end`	บล็อกถูกจัดชิดไปที่จุดสิ้นสุดของแกนขวาง (แกนตั้ง)
`center`	บล็อกอยู่กึ่งกลางของแกนขวาง (แกนตั้ง)
`space-between`	บล็อกกระจายตัวไปตามแกนขวาง (แกนตั้ง) โดยที่องค์ประกอบแรกจะถูกจัดชิดไปที่จุดเริ่มต้นของแกน และองค์ประกอบสุดท้ายถูกจัดชิดไปที่จุดสิ้นสุด
`space-around`	บล็อกกระจายตัวไปตามแกนขวาง (แกนตั้ง) โดยที่ช่องว่างระหว่างบล็อกแรกกับจุดเริ่มต้นของแกน และบล็อกสุดท้ายกับจุดสิ้นสุดของแกน จะมีขนาดเท่ากัน เหมือนกับช่องว่างระหว่างบล็อกอื่นๆ อย่างไรก็ตาม พวกมันไม่ได้เท่ากันอย่างที่อาจคิด: ช่องว่างจะถูกรวมกัน ดังนั้นระหว่างสองบล็อก ระยะห่างจะมีมากเป็นสองเท่า เมื่อเทียบกับระยะห่างระหว่างบล็อกกับจุดเริ่มต้น/สิ้นสุดของแกน

ตัวอย่าง . ค่า flex-start

ในตัวอย่างนี้ แกนที่ใช้ในการจัดแนว มีทิศทางจากบนลงล่าง นั่นคือมันเป็นแกนขวาง ดังที่เห็นจากผลลัพธ์ที่ได้ องค์ประกอบทั้งหมดของเรา ถูกจัดชิดไปที่ส่วนบนของมัน:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง . ค่า flex-end

ในตัวอย่างนี้ บล็อกถูกจัดชิดไปที่ด้านล่าง ของแกนขวาง เนื่องจากคุณสมบัติ align-content ถูกตั้งค่าเป็น flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง . ค่า center

ตอนนี้บล็อกถูกจัดแนวอยู่กึ่งกลาง ของแกนขวาง:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

การจัดแนวตามจุดเริ่มต้นของแกนตั้งในกริด

มาลองตั้งค่าการจัดแนวสำหรับ องค์ประกอบของเราในกริดตามจุดเริ่มต้นของแกนตั้ง:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

การจัดแนวตามกึ่งกลางของแกนตั้งในกริด

และตอนนี้มาลองตั้งค่าการจัดแนว องค์ประกอบตามกึ่งกลางของแกนตั้ง:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

การจัดแนวตามจุดสิ้นสุดของแกนตั้งในกริด

มาลองตั้งค่าการจัดแนว องค์ประกอบตามจุดสิ้นสุดของแกนตั้ง:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

ดูเพิ่มเติม

คุณสมบัติ flex-direction,
ซึ่งกำหนดทิศทางของแกนสำหรับบล็อกแบบ flex
คุณสมบัติ justify-content,
ซึ่งกำหนดการจัดแนวตามแกนหลัก
คุณสมบัติ align-items,
ซึ่งกำหนดการจัดแนวตามแกนขวาง
คุณสมบัติ flex-wrap,
ซึ่งกำหนดความสามารถในการขึ้นบรรทัดใหม่ของบล็อกแบบ flex
คุณสมบัติ flex-flow,
คำสั่งย่อสำหรับ flex-direction และ flex-wrap
คุณสมบัติ order,
ซึ่งกำหนดลำดับของบล็อกแบบ flex
คุณสมบัติ align-self,
ซึ่งกำหนดการจัดแนวของบล็อกเดียว
คุณสมบัติ place-content,
ซึ่งกำหนดการจัดแนวตามแกนหลักและแกนขวาง