Thuộc tính order xác định sự sắp xếp các phần tử linh hoạt bên trong một flex container. Nó quyết định vị trí của chúng so với nhau. Nó cho phép bạn sắp xếp lại các phần tử một cách trực quan mà không ảnh hưởng đến thứ tự mã nguồn.
- Giá trị mặc định của thuộc tính
orderlà0. Các giá trị cao hơn sẽ xuất hiện sau trong thứ tự hiển thị. - Thuộc tính này chỉ áp dụng cho các phần tử bên trong flex container. Nó không ảnh hưởng đến các phần tử hoặc container không linh hoạt.
Cú pháp
order: number | initial | inherit;
Giá trị thuộc tính:
- number: Chỉ định thứ tự của một phần tử linh hoạt. Các phần tử có số nhỏ hơn xuất hiện trước.
- initial: Đặt lại thuộc tính về giá trị mặc định của nó (0).
- inherit: Kế thừa giá trị order từ phần tử cha của nó.
<html>
<head>
<style>
.item1 {
order: 2;
}
.item2 {
order: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
</div>
</body>
</html>
. Sử dụng thuộc tính Number
Giá trị number trong thuộc tính order chỉ định vị trí của một phần tử linh hoạt so với những phần tử khác.
Cú pháp:
order: number;HTML
<html>
<head>
<style>
.container {
display: flex;
}
.item1 {
order: 2;
}
.item2 {
order: 1;
}
.item3 {
order: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Trong ví dụ này
- .container là một flex container với ba phần tử con.
- Mỗi phần tử được gán một giá trị order:
- .item1 có order: 2;
- .item2 có order: 1;
- .item3 có order: 3;
- Các phần tử được hiển thị dựa trên giá trị order của chúng. Kết quả là thứ tự: Item 2, Item 1, Item 3.
. Sử dụng giá trị initial
Giá trị initial đặt lại thuộc tính order về giá trị mặc định của nó là 0.
Cú pháp:
order:initial;HTML
<html>
<head>
<style>
.container {
display: flex;
}
.item1 {
order: 2;
}
.item2 {
order: initial;
}
.item3 {
order: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Trong ví dụ này
- .item1 có order: 2;, đặt nó sau các phần tử có giá trị order thấp hơn.
- .item2 có order: initial;, đặt lại order của nó về giá trị mặc định là 0.
- .item3 có order: 1;, đặt nó giữa các phần tử có order 0 và 2.
. Sử dụng giá trị inherit
Giá trị inherit làm cho thuộc tính order kế thừa giá trị của nó từ phần tử cha.
HTML<html>
<head>
<style>
.container {
display: flex;
order: 3;
}
.item1 {
order: inherit;
}
.item2 {
order: 1;
}
.item3 {
order: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Trong ví dụ này
- .container có giá trị order là 3, nhưng vì nó không phải là một flex item. Giá trị này không ảnh hưởng đến vị trí của nó.
- .item1 có order: inherit;, cố gắng kế thừa giá trị order từ phần tử cha của nó.
- .item2 có order: 1;, và .item3 có order: 2;, xác định vị trí của chúng trong flex container.
Các phương pháp hay nhất để sử dụng thuộc tính CSS order
- Sử dụng Order một cách tiết kiệm: Hãy dựa vào thứ tự tài liệu tự nhiên bất cứ khi nào có thể. Để tránh sự phức tạp không cần thiết trong bố cục của bạn.
- Kết hợp với Flexbox: Sử dụng order hiệu quả bên trong một flex container. Để sắp xếp lại các phần tử một cách trực quan mà không thay đổi mã nguồn.
- Mặc định theo luồng tự nhiên: Chỉ đặt order khi cần sắp xếp lại cụ thể. Sử dụng quá nhiều có thể gây nhầm lẫn trong việc duy trì bố cục.