การจัดตำแหน่งองค์ประกอบ Flex ตามแกนหลักใน CSS

คุณสมบัติ justify-content ช่วยให้ จัดตำแหน่งองค์ประกอบตามแกนหลักได้ ก่อนหน้านี้ คุณได้เรียนรู้ค่าต่างๆ แล้ว เช่น center, space-between, space-around, space-evenly ทีนี้มาศึกษา ค่าอื่นๆ เพิ่มเติมกัน

ค่า flex-start ดันองค์ประกอบไปที่จุดเริ่มต้น ของแกนหลัก และค่า flex-end ดันไปที่จุดสิ้นสุด มาดูตัวอย่างกัน

ตัวอย่าง

กำหนดทิศทางแกนหลักจากซ้ายไปขวา โดยกำหนด คุณสมบัติ flex-direction เป็นค่า row ดันบล็อกไปที่จุดเริ่มต้นแกน ในการนี้ ให้ตั้งค่า justify-content เป็น flex-start:

.parent {
	display: flex;
	flex-direction: row; /* แกนหลักจากซ้ายไปขวา */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

ตัวอย่าง

ทีนี้ลองดันบล็อกไปที่จุดสิ้นสุดแกน ในการนี้ ให้ตั้งค่า justify-content เป็น flex-end:

.parent {
	display: flex;
	flex-direction: row; /* แกนหลักจากซ้ายไปขวา */
	justify-content: flex-end; /* บล็อกไปที่จุดสิ้นสุดแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

ตัวอย่าง

ทีนี้มากำหนดทิศทางแกนหลักจากขวาไปซ้าย โดยกำหนดคุณสมบัติ flex-direction เป็นค่า row-reverse ดันบล็อกไปที่จุดเริ่มต้น แกน ซึ่งก็คือขอบด้านขวา ในการนี้ ให้ตั้งค่า justify-content เป็น flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* แกนหลักจากขวาไปซ้าย */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

ตัวอย่าง

และทีนี้ลองดันบล็อกไปที่จุดสิ้นสุดแกนหลัก ซึ่งก็คือขอบด้านซ้าย ในการนี้ ให้ตั้งค่า justify-content เป็น flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* แกนหลักจากขวาไปซ้าย */
	justify-content: flex-end; /* บล็อกไปที่จุดสิ้นสุดแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

ตัวอย่าง

ในตัวอย่างก่อนหน้าแกนหลักวางในแนวนอน ทีนี้ลองพลิก มันและกำหนดทิศทางในแนวตั้ง

กำหนดทิศทางแกนหลักลงด้านล่าง โดยกำหนด คุณสมบัติ flex-direction เป็นค่า column

ดันบล็อกไปที่จุดเริ่มต้นแกนหลัก ซึ่งก็คือ ขอบด้านบน ในการนี้ ให้ตั้งค่า justify-content เป็น flex-start:

.parent {
	display: flex;
	flex-direction: column; /* แกนหลักจากบนลงล่าง */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

ตัวอย่าง

ทีนี้ลองดันบล็อกไปที่จุดสิ้นสุดแกนหลัก ซึ่งก็คือขอบด้านล่าง ในการนี้ ให้ตั้งค่า justify-content เป็น flex-end:

.parent {
	display: flex;
	flex-direction: column; /* แกนหลักจากบนลงล่าง */
	justify-content: flex-end; /* บล็อกไปที่จุดสิ้นสุดแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

ตัวอย่าง

พลิกแกนหลัก โดยกำหนดทิศทางจากล่าง ขึ้นบน ในการนี้ กำหนดคุณสมบัติ flex-direction เป็นค่า column-reverse ใน กรณีนี้ บล็อกจะสลับลำดับ - ที่จุดเริ่มต้นแกนจะเป็นบล็อกสุดท้ายในโค้ด HTML

ลองดันบล็อกไปที่จุดเริ่มต้นแกนหลัก ซึ่งก็คือขอบด้านล่าง ในการนี้ ให้ตั้งค่า justify-content เป็น flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* แกนหลักจากล่างขึ้นบน */
	justify-content: flex-start; /* บล็อกไปที่จุดเริ่มต้นแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

ตัวอย่าง

ลองดันบล็อกไปที่จุดสิ้นสุดแกนหลัก ซึ่งก็คือขอบด้านบน ในการนี้ ให้ตั้งค่า justify-content เป็น flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* แกนหลักจากล่างขึ้นบน */
	justify-content: flex-end; /* บล็อกไปที่จุดสิ้นสุดแกนหลัก */
}

ผลลัพธ์จากการทำงานของโค้ด:

โจทย์ฝึกปฏิบัติ

สร้างหน้าเว็บตามตัวอย่างนี้: