order
Bài học 13 trên 15 trong khóa học CSS Flexbox: khóa học đầy đủ của Coddy.
Thuộc tính order xác định mức độ ưu tiên của một mục flex cụ thể.
Theo mặc định, các mục flex được sắp xếp theo thứ tự trong mã nguồn, nhưng bạn có thể thay đổi thứ tự này bằng thuộc tính order.
Thuộc tính order nhận một số làm giá trị. Số càng lớn thì mức độ ưu tiên của mục flex càng cao (mục đó xuất hiện ở cuối).
Ví dụ:
.item {
order: 5;
}Giá trị mặc định là 0.
Các mục có cùng giá trị
ordersẽ giữ nguyên thứ tự như trong mã nguồn.
Thử thách
DễBạn có một flexbox gồm sáu mục flex. Hãy thêm thuộc tính order vào các mục flex chẵn (2, 4, 6) để thứ tự của các mục là:
1, 3, 5, 2, 4, 6
Bạn có thể dùng id và class trong HTML để chọn phần tử cụ thể trong CSS.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Tất cả bài học trong CSS Flexbox: khóa học đầy đủ
Tự luyện tập: Playground Web