การจัดเรียงบล็อกแบบตารางด้วยความกว้างอัตโนมัติใน CSS

ในบทเรียนที่ผ่านมา การจัดเรียงแบบตารางของเราทำให้ ความกว้างขององค์ประกอบและระยะห่างขององค์ประกอบนั้น รวมกันแล้วต้องได้ความกว้างขององค์ประกอบแม่ ซึ่งวิธีนี้ ไม่ค่อยเป็นสากลนัก ลองมาทำให้องค์ประกอบปรับตัวอัตโนมัติ ตามความกว้างขององค์ประกอบแม่กันดีกว่า

สมมติว่าเรามีองค์ประกอบแม่ดังนี้:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

สมมติให้บล็อกในตารางนี้จัดเรียงแถวละ 4 บล็อก:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

มากำหนดความกว้างของบล็อกของเรา เพื่อให้แต่ละบล็อก ครอบครองหนึ่งในสี่ส่วนขององค์ประกอบแม่ สำหรับวิธีนี้ ให้ตั้งค่าขนาดเป็น 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

กำหนดความกว้างของบล็อกเป็นเปอร์เซ็นต์ เพื่อให้ ในตารางมีบล็อกแถวละสามบล็อก

กำหนดความกว้างของบล็อกเป็นเปอร์เซ็นต์ เพื่อให้ ในตารางมีบล็อกแถวละสองบล็อก

กำหนดความกว้างของบล็อกเป็นเปอร์เซ็นต์ เพื่อให้ ในตารางมีบล็อกแถวละหนึ่งบล็อก