คุณสมบัติ order ใน CSS Flexbox

order คืออะไร?

คุณสมบัติ order ใช้ควบคุม ลำดับการแสดงผล ของ flex items ภายในคอนเทนเนอร์เดียวกัน โดยไม่ต้องเปลี่ยนลำดับใน HTML ช่วยให้จัดเรียงเนื้อหาได้ยืดหยุ่นสำหรับ Responsive Design

วิธีทำงาน

• ค่าเริ่มต้น: 0
• ค่าตัวเลข: ลบได้ (-1, -2...), บวกได้ (1, 2...)
• items ที่มี order น้อยกว่า จะแสดงก่อน
• items ที่มี order เท่ากัน จะเรียงตามลำดับใน HTML (source order)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #fff3e0;
      align-content: space-between;
      height: 150px;
      width: 600px;
      flex-wrap: wrap;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      border: 2px solid #ff9800;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      width: 100px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง order property</h1>
  <p>ลำดับใน HTML: Q1, Q2, Q3, Q4, Q5, Q6, Q7, Q8</p>
  <p>ลำดับแสดงผล: Q4(1), Q3(2), Q7(3), Q6(4), Q8(5), Q2(6), Q5(7), Q1(8)</p>
  <div class="mycontainer">
    <div style="order: 8">Q1</div>
    <div style="order: 6">Q2</div>
    <div style="order: 2">Q3</div>
    <div style="order: 1">Q4</div>
    <div style="order: 7">Q5</div>
    <div style="order: 4">Q6</div>
    <div style="order: 3">Q7</div>
    <div style="order: 5">Q8</div>
  </div>
</body>
</html>

การใช้งานจริง: Responsive Reordering

.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.sidebar {
  flex: 0 0 280px;
  order: 2;  /* Desktop: Sidebar อยู่ขวา */
}

.main-content {
  flex: 1;
  min-width: 0;
  order: 1;  /* Desktop: Content อยู่ซ้าย */
}

@media (max-width: 767px) {
  .sidebar {
    order: 1;  /* Mobile: Sidebar อยู่บน */
  }
  .main-content {
    order: 2;  /* Mobile: Content อยู่ล่าง */
  }
}

การใช้งานจริง: Visual vs Source Order

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  order: -1;  /* รูปภาพขึ้นบนสุด แม้ใน HTML จะอยู่ล่าง */
}

.card-title {
  order: 0;
}

.card-content {
  order: 1;
}

.card-footer {
  order: 2;
}

/* HTML Structure:

  
...
  
  
  
...

*/

Accessibility Warning ⚠️

คำแนะนำ

• ใช้ order สำหรับ Responsive reordering (Sidebar ↔ Content)
• ใช้ค่าลบ (order: -1) เพื่อดัน item ขึ้นบนสุด
• หลีกเลี่ยงการสลับลำดับเนื้อหาที่สำคัญต่อ Accessibility
• ทดสอบด้วย Keyboard navigation และ Screen reader เสมอ