Thuộc tính order trong CSS Flexbox

Thuộc tính order kiểm soát thứ tự hiển thị của flex items mà không thay đổi cấu trúc HTML. Giá trị mặc định là 0. Item có order nhỏ hơn hiển thị trước.

Cú pháp

.item {
  order: <integer>; /* Mặc định: 0, âm được phép */
}

Ví dụ: Sắp xếp lại thứ tự

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e67e22;
      align-content: space-between;
      height: 150px;
      width: 600px;
      flex-wrap: wrap;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <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>

Kết quả hiển thị

Thứ tự thực tế: Q4 (1) → Q3 (2) → Q7 (3) → Q6 (4) → Q8 (5) → Q2 (6) → Q5 (7) → Q1 (8)

Ứng dụng thực tế

/* Responsive: Sidebar trước trên mobile, sau trên desktop */
.sidebar { order: 1; }
.main { order: 2; }
@media (min-width: 768px) {
  .sidebar { order: 2; }
  .main { order: 1; }
}

/* Featured item lên đầu */
.item.featured { order: -1; }

/* Visual reordering cho accessibility */
.visually-first { order: -1; }

Lưu ý quan trọng về Accessibility

• order chỉ thay đổi thứ tự VISUAL, không thay thứ tự DOM
• Screen reader và Tab navigation vẫn theo thứ tự HTML
• Không dùng order để sắp xếp nội dung quan trọng theo logic
• Chỉ dùng cho decorative reordering (ví dụ: featured badge)

Kết hợp với flex-wrap

Khi flex-wrap: wrap, order áp dụng cho toàn bộ dòng, không riêng từng dòng.