CSS - Thứ tự: Khám phá Nghệ thuật Sắp xếp các Element trong Flexbox

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng tìm hiểu một chủ đề thú vị sẽ mang lại cho bạn siêu năng lực trong việc sắp xếp các phần tử trong một container flexbox. Hãy chuẩn bị tinh thần vì chúng ta sẽ khám phá thuộc tính order trong CSS!

什么是 order?

Hãy tưởng tượng bạn đang sắp xếp sách trên kệ. Thường thì bạn sẽ đặt chúng theo một thứ tự cụ thể, phải không? well, thuộc tính order trong CSS hoạt động tương tự, nhưng cho các phần tử flex trong bố cục flexbox. Nó cho phép bạn kiểm soát thứ tự mà các phần tử flex xuất hiện, bất kể vị trí ban đầu của chúng trong HTML.

Hãy bắt đầu với một ví dụ đơn giản:

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

.container {
display: flex;
}

.item {
width: 50px;
height: 50px;
background-color: #3498db;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}

Điều này sẽ hiển thị ba hộp màu xanh với số 1, 2 và 3. Bây giờ, hãy làm cho mọi thứ trở nên thú vị hơn một chút!

CSS Order Integer

Thuộc tính order chấp nhận các giá trị số nguyên, cả số dương và số âm. Giá trị mặc định là 0, và các phần tử có cùng giá trị order sẽ được hiển thị theo thứ tự chúng xuất hiện trong HTML.

Hãy sắp xếp lại các hộp của chúng ta:

.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 2; }

Bây giờ, các hộp của chúng ta sẽ xuất hiện theo thứ tự 2, 3, 1. Đ酷いですね! Đó như một phép màu, nhưng với CSS!

Đây là một sự thật thú vị: Bạn có thể sử dụng bất kỳ giá trị số nguyên nào, không chỉ là các số liên tiếp. Ví dụ:

.item:nth-child(1) { order: 100; }
.item:nth-child(2) { order: -5; }
.item:nth-child(3) { order: 0; }

Điều này sẽ hiển thị các hộp theo thứ tự 2, 3, 1 lần nữa, vì -5 < 0 < 100.

CSS Order Initial

Đôi khi, bạn có thể muốn đặt lại thứ tự của một phần tử về giá trị mặc định. Đó là lúc initial phát huy tác dụng:

.item { order: initial; }

Điều này đặt thuộc tính order trở lại về giá trị mặc định là 0. Nó như thể bạn đang nói với các phần tử flex, "Hãy quên những gì tôi đã nói trước đó, chỉ cần xếp hàng như bình thường!"

CSS Order Unset

Giá trị unset có phần phức tạp hơn. Nó hoạt động như initial nếu thuộc tính không được kế thừa, và như inherit nếu nó được kế thừa. Vì order không phải là thuộc tính kế thừa, unset sẽ hành động như initial trong trường hợp này:

.item { order: unset; }

Hãy tưởng tượng unset như một con kỳ nhông - nó thích nghi dựa trên hành vi tự nhiên của thuộc tính.

CSS Order Revert

Cuối cùng, chúng ta có revert. Giá trị này đặt lại thuộc tính về giá trị mặc định được thiết lập bởi bảng样式 của trình duyệt. Đối với order, điều này thường là 0:

.item { order: revert; }

revert như một cỗ máy thời gian, đưa phần tử của bạn trở về trạng thái mặc định của trình duyệt.

Ví dụ Thực tế: Xây dựng một Menu Điều hướng T响应式

Hãy áp dụng kiến thức mới học để tạo một menu điều hướng响应式 thay đổi thứ tự trên màn hình nhỏ hơn:

<nav class="menu">
<a href="#" class="menu-item home">Home</a>
<a href="#" class="menu-item about">About</a>
<a href="#" class="menu-item services">Services</a>
<a href="#" class="menu-item contact">Contact</a>
</nav>

.menu {
display: flex;
flex-wrap: wrap;
}

.menu-item {
padding: 10px;
background-color: #3498db;
color: white;
text-decoration: none;
margin: 5px;
}

@media (max-width: 600px) {
.home { order: 1; }
.about { order: 3; }
.services { order: 4; }
.contact { order: 2; }
}

Trong ví dụ này, trên màn hình rộng hơn 600px, các mục menu xuất hiện theo thứ tự tự nhiên. Nhưng trên màn hình nhỏ hơn, chúng sẽ được sắp xếp lại để ưu tiên các liên kết Home và Contact.

Tóm tắt các giá trị Order

Dưới đây là bảng tóm tắt các giá trị order mà chúng ta đã thảo luận:

Giá trị	Mô tả
<integer>	Bất kỳ giá trị số nguyên nào, cả số dương và số âm
initial	Đặt thứ tự về giá trị mặc định (0)
unset	Hành động như initial cho thuộc tính order
revert	Đặt lại về giá trị mặc định của trình duyệt (thường là 0)

Nhớ rằng, vẻ đẹp của thuộc tính order nằm ở sự linh hoạt của nó. Bạn có thể tạo ra các bố cục phức tạp và thiết kế响应式 chỉ với một vài dòng CSS. Nó như thể bạn có một枝魔法杖 cho các phần tử flex!

Trong hành trình tiếp tục của bạn trong lập trình web, bạn sẽ tìm thấy vô số cách sáng tạo để sử dụng thuộc tính order. có lẽ bạn sẽ tạo ra một thư viện ảnh sắp xếp theo sở thích người dùng, hoặc một trò chơi nơi các phần tử di chuyển một cách động. Các khả năng là vô tận!

Vậy hãy tiếp tục, thử nghiệm với order, và đừng ngại làm rối loạn. Sau tất cả, trong thế giới của CSS, một chút rối loạn có thể dẫn đến những thiết kế đẹp mắt!

Credits: Image by storyset