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

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

ไวยากรณ์

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

ค่าต่างๆ

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

ค่าเริ่มต้น: flex-start

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

ขณะนี้แกนมีทิศทางจากซ้ายไปขวา (เกิดจาก flex-direction: row) และบล็อก ชิดไปที่ด้านซ้าย:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

ในตัวอย่างนี้ แกนก็มีทิศทางจากซ้าย ไปขวาเช่นกัน แต่บล็อกชิดไปที่ด้านขวา เนื่องจากกำหนด justify-content เป็นค่า flex-end:

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

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	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>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง ค่า space-between

บล็อกกระจายตัวไปตามแกนหลัก โดยที่ องค์ประกอบแรกชิดไปที่จุดเริ่มต้นของแกน และองค์ประกอบสุดท้ายชิดไปที่จุดสิ้นสุด:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง ค่า space-around

บล็อกกระจายตัวไปตามแกนหลัก โดยที่ ระหว่างบล็อกแรกกับจุดเริ่มต้นของแกน บล็อกสุดท้าย กับจุดสิ้นสุดของแกนจะมีช่องว่างเท่ากัน กับช่องว่างระหว่างบล็อกอื่นๆ อย่างไรก็ตาม ช่องว่าง จะบวกกัน และระหว่างสองบล็อก ระยะห่าง จะมากกว่าสองเท่า เมื่อเทียบกับระหว่างบล็อกกับจุดเริ่มต้น/สิ้นสุด ของแกน:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง ค่า center แกนชี้ลง

เปลี่ยนทิศทางของแกนหลัก โดยกำหนด flex-direction เป็นค่า column:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง ค่า space-between แกนชี้ลง

ตอนนี้บล็อกจะกระจายตัวเท่าๆ กันตาม แนวตั้ง:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง การจัดตำแหน่งตามจุดเริ่มต้นของแกนแนวนอน (แถว) ใน grid

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

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

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

ตัวอย่าง การจัดตำแหน่งที่กลางแกนแนวนอนใน grid

กำหนดการจัดตำแหน่งสำหรับ องค์ประกอบของเราไปที่กลางแกนแนวนอน:

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

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

ตัวอย่าง การจัดตำแหน่งตามจุดสิ้นสุดของแกนแนวนอนใน grid

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

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

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 container
คุณสมบัติ align-items,
ซึ่งกำหนดการจัดตำแหน่งตามแกนตั้งขวาง
คุณสมบัติ flex-wrap,
ซึ่งกำหนดการขึ้นบรรทัดใหม่ของ flex container
คุณสมบัติ flex-flow,
คำสั่งย่อสำหรับ flex-direction และ flex-wrap
คุณสมบัติ order,
ซึ่งกำหนดลำดับของ flex item
คุณสมบัติ align-self,
ซึ่งกำหนดการจัดตำแหน่งของ item เดียว
คุณสมบัติ flex-basis,
ซึ่งกำหนดขนาดเริ่มต้นของ flex item
คุณสมบัติ flex-grow,
ซึ่งกำหนดความสามารถในการขยายตัวของ flex item
คุณสมบัติ flex-shrink,
ซึ่งกำหนดความสามารถในการหดตัวของ flex item
คุณสมบัติ flex,
คำสั่งย่อสำหรับ flex-grow, flex-shrink และ flex-basis