ลำดับของบล็อก flex ใน CSS

สมมติว่าเรามีบล็อกต่อไปนี้ เรียงอยู่ในแถว:

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

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

ลองเปลี่ยนลำดับการแสดงผลบนหน้าจอ โดยไม่เปลี่ยนลำดับในโค้ด HTML

สำหรับสิ่งนี้ มีคุณสมบัติ order ซึ่งกำหนดลำดับขององค์ประกอบเฉพาะตามกฎต่อไปนี้: องค์ประกอบที่มีค่ามากกว่าจะอยู่ใกล้กับปลายแกนมากกว่า และองค์ประกอบที่มีค่าน้อยกว่าจะอยู่ใกล้กับจุดเริ่มต้นของแกนมากกว่า

ค่าของคุณสมบัตินี้สามารถรับได้เป็นจำนวนบวกหรือลบ ตามค่าเริ่มต้น องค์ประกอบทั้งหมดจะเรียงตามลำดับกัน ซึ่งหมายความว่า order ของพวกเขาคือศูนย์

ลองเปลี่ยนลำดับขององค์ประกอบของเรา ในการทำเช่นนี้ ให้กำหนดคลาสเพิ่มเติม "elem" ให้กับองค์ประกอบที่สอง และสำหรับคลาสนี้ ให้ตั้งค่าคุณสมบัติ order เป็นค่า 1:

.elem {
	order: 1;
	border: 1px solid red;
}

เนื่องจากองค์ประกอบทั้งหมดจะมีลำดับ 0 ตามค่าเริ่มต้น และองค์ประกอบที่สองของเราจะมีลำดับมากกว่าองค์ประกอบอื่นๆ ดังนั้นมัน จะอยู่หลังจากพวกเขา:

ตอนนี้ลองตั้งค่าเป็นค่าลบ -1:

.elem {
	order: -1;
	border: 1px solid red;
}

ในกรณีนี้ บล็อกของเราจะย้ายไปที่จุดเริ่มต้นของแกน:

ลองใช้งานคุณสมบัตินี้ด้วยตนเอง สำหรับทิศทางแกนต่างๆ