คุณสมบัติ order

คุณสมบัติ order กำหนดลำดับการเรียง ของ flex-block แต่ละตัวภายใน flex-container ใช้กับ flex block เฉพาะตัว

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

ไวยากรณ์

selector {
	order: positive or negative number;
}

ตัวอย่าง

ในตัวอย่างนี้ บล็อกทั้งหมดถูกกำหนดลำดับ การจัดวางด้วย order บล็อกแรกสุด จะเป็นบล็อกที่มี order เป็นลบ -1, ตามด้วย order 1 และต่อๆ ไปตามลำดับจากน้อยไปมาก:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
	<div id="elem6">6</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#elem1 {
	order: 4;
}
#elem2 {
	order: 5;
}
#elem3 {
	order: 3;
}
#elem4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

ดูเพิ่มเติม

คุณสมบัติ flex-direction,
ซึ่งกำหนดทิศทางของแกน flex blocks
คุณสมบัติ justify-content,
ซึ่งกำหนดการจัดแนวตามแกนหลัก
คุณสมบัติ align-items,
ซึ่งกำหนดการจัดแนวตามแกนขวาง
คุณสมบัติ flex-wrap,
ซึ่งกำหนดความเป็นหลายบรรทัดของ flex blocks
คุณสมบัติ flex-flow,
คำสั่งย่อสำหรับ flex-direction และ flex-wrap
คุณสมบัติ align-self,
ซึ่งกำหนดการจัดแนวของบล็อกเดียว
คุณสมบัติ flex-basis,
ซึ่งกำหนดขนาดของ flex block เฉพาะตัว
คุณสมบัติ flex-grow,
ซึ่งกำหนดความ "ละโมบ" ของ flex blocks
คุณสมบัติ flex-shrink,
ซึ่งกำหนดความสามารถในการหดตัวของ flex blocks
คุณสมบัติ flex,
คำสั่งย่อสำหรับ flex-grow, flex-shrink และ flex-basis