Flexbox

1. Core Idea

order ใช้เปลี่ยนลำดับการแสดงผลของ flex items บนหน้าจอ โดยไม่ย้ายตำแหน่งจริงใน HTML เหมาะกับการปรับ presentation เล็ก ๆ เช่น ให้ปุ่มสำคัญแสดงก่อน หรือจัดลำดับ badge/title/action ใน card

• order เป็น property ของ flex item ไม่ใช่ flex container
• ค่าเริ่มต้นของทุก item คือ order: 0
• item ที่มี order น้อยกว่า จะแสดงก่อน item ที่มี order มากกว่า
• ถ้า order เท่ากัน browser จะใช้ลำดับเดิมจาก HTML

2. Mental Model

ให้นึกถึงบัตรคิวที่ยังวางอยู่ในกองเดิม แต่แต่ละใบมีเลข priority แปะอยู่ เมื่อถึงเวลาจัดแสดง browser จะเรียงจากเลข priority น้อยไปมาก ถ้าสองใบมีเลขเท่ากัน ก็กลับไปดูว่าใบไหนมาก่อนในกองเดิม

HTML:   A(order: 0)  B(order: -1)  C(order: 1)
Visual: B(order: -1)  A(order: 0)   C(order: 1)

3. Rule / Definition

order เปลี่ยนเฉพาะลำดับที่มองเห็น ไม่ได้เปลี่ยนความหมายของเอกสารจริง ดังนั้นถ้าเนื้อหามีลำดับสำคัญต่อการอ่าน เช่น ขั้นตอน, heading, หรือ form flow ควรจัด HTML ให้ถูกก่อน แล้วใช้ order เฉพาะการปรับภาพเล็กน้อย

4. Worked Example

• เริ่มจาก HTML ที่เรียงเป็น Logo, Search, Primary button
• ทุก item มี order: 0 จึงแสดงตาม HTML เดิม
• ถ้าใส่ order: -1 ให้ Primary button ปุ่มนี้จะถูกแสดงก่อน item ที่ยังเป็น 0
• Logo และ Search ยังมี order เท่ากัน จึงเรียงกันตาม HTML เดิม

.toolbar {
  display: flex;
  gap: 12px;
}

.primary {
  order: -1;
}

5. Code Example

6. Recap

• order เขียนบน flex item และทำงานเมื่อ parent เป็น flex container
• ค่า default คือ 0; ค่าน้อยกว่าแสดงก่อน ค่ามากกว่าแสดงทีหลัง
• ถ้า order เท่ากัน browser ใช้ลำดับ HTML เดิม
• ใช้ order เพื่อปรับภาพเล็กน้อย ไม่ใช้แทนการจัด HTML ให้มีความหมายถูกต้อง

Lab 1: ย้ายปุ่มสำคัญขึ้นหน้าแถว

Lab 2: จัด badge / title / action ด้วย order