Vai trò giá trị wrap-reverse của CSS flex-wrap

flex-wrap: wrap-reverse

Giá trị wrap-reverse của thuộc tính flex-wrap làm các flex items **xuống dòng (wrap) theo thứ tự ngược lại** (từ dưới lên, từ phải sang trái tùy `flex-direction`).

Các giá trị flex-wrap

Giá trị	Hành vi
`nowrap` (mặc định)	Không wrap, co lại vừa một dòng
`wrap`	Xuống dòng khi hết chỗ, thứ tự 1→2→3... (trên→dưới, trái→phải)
`wrap-reverse`	Xuống dòng, thứ tự ngược: dòng cuối lên trước

Ví dụ: wrap-reverse

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      flex-wrap: wrap-reverse;  /* Quan trọng: wrap ngược */
      width: 350px;             /* Giới hạn width để ép wrap */
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div> <div>Q2</div> <div>Q3</div>
    <div>Q4</div> <div>Q5</div> <div>Q6</div>
    <div>Q7</div> <div>Q8</div> <div>Q9</div>
  </div>
</body>
</html>

Giải thích trực quan

Với container width 350px, mỗi item 100px + margin 10px = 110px → 3 item/dòng.

wrap (mặc định): Dòng 1: Q1 Q2 Q3 | Dòng 2: Q4 Q5 Q6 | Dòng 3: Q7 Q8 Q9
wrap-reverse: Dòng 1: Q7 Q8 Q9 | Dòng 2: Q4 Q5 Q6 | Dòng 3: Q1 Q2 Q3
(Các dòng sắp xếp từ **dưới lên**, nhưng thứ tự item **trong mỗi dòng** vẫn trái→phải)

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

flex-direction	wrap	wrap-reverse
`row` (mặc định)	Trái→Phải, Trên→Dưới	Trái→Phải, Dưới→Trên
`row-reverse`	Phải→Trái, Trên→Dưới	Phải→Trái, Dưới→Trên
`column`	Trên→Dưới, Trái→Phải	Trên→Dưới, Phải→Trái
`column-reverse`	Dưới→Trên, Trái→Phải	Dưới→Trên, Phải→Trái

Ứng dụng thực tế

Chat messages: Tin mới nhất ở dưới, nhưng wrap-reverse cho tin cũ lên trên (ít dùng).
Masonry-like: Kết hợp `column` + `wrap-reverse` cho layout lưới bất quy tắc.
Visual reordering: Đảo thứ tự hiển thị mà không đổi DOM (SEO, accessibility giữ nguyên).

Lưu ý

wrap-reverse chỉ đảo **thứ tự các dòng (cross-axis)**, **không đảo** thứ tự item trong dòng (main-axis). Để đảo cả hai, kết hợp `flex-direction: row-reverse` + `wrap-reverse`.