CSS - 排序：精通 Flexbox 元素排列藝術

你好，初露頭角的網頁開發者們！今天，我們將深入一個令人興奮的主題，讓你掌握在 Flexbox 容器內排列元素的超能力。請繫好安全帶，因為我們即將探索 CSS order 屬性！

CSS - Order

`order` 是什麼？

想像你正在書架上排列書籍。通常，你會將它們按照特定的順序放置，對吧？CSS order 屬性的工作原理與此類似，但面向的是 Flexbox 布局中的 flex 項目。它允許你控制 flex 項目出現的順序，無論它們在 HTML 中的原始位置如何。

我們從一個簡單的例子開始：

<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;
}

這將顯示三個帶有數字 1、2 和 3 的藍色方框。現在，讓我們來點小小的變化！

CSS `order` 整數

order 屬性接受整數值，可以是正數也可以是負數。默認值是 0，相同 order 值的項目將按照它們在 HTML 中出現的順序顯示。

讓我們重新排列我們的方框：

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

現在，我們的方框將按照 2、3、1 的順序出現。酷炫吧？這就像魔法，但用的是 CSS！

這裡有一個有趣的知識：你可以使用任何整數值，而不僅僅是連續的數字。例如：

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

這會再次按照 2、3、1 的順序顯示方框，因為 -5 < 0 < 100。

CSS `order` Initial

有時候，你可能想將元素的 order 重置為其默認值。這時，initial 會派上用場：

.item { order: initial; }

這將 order 屬性設置回其初始值 0。這就像告訴你的 flex 項目：“忘了我之前說的，就像平常一樣排隊！”

CSS `order` Unset

unset 值有點複雜。如果屬性未被繼承，它會像 initial 一樣行為；如果被繼承，則像 inherit 一樣。由於 order 不是一個被繼承的屬性，unset 在這種情況下會與 initial 行為相同：

.item { order: unset; }

將 unset 想像成一隻變色龍——它根據屬性的自然行為進行適應。

CSS `order` Revert

最後但同樣重要的是，我們有 revert。這個值將屬性重置為用戶代理的樣式表中設定的默認值。對於 order，這通常是 0：

.item { order: revert; }

revert 就像一臺時光機，將你的元素帶回到其瀏覽器默認的狀態。

實際範例：構建響應式導航菜單

讓我們將我們新學到的知識應用於創建一個響應式導航菜單，該菜單在小屏幕上會改變順序：

<nav class="menu">
<a href="#" class="menu-item home">首頁</a>
<a href="#" class="menu-item about">關於我們</a>
<a href="#" class="menu-item services">服務</a>
<a href="#" class="menu-item 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; }
}

在這個例子中，當屏幕寬度大於 600px 時，菜單項目會按照自然順序出現。但在小屏幕上，它們會重新排列以優先顯示首頁和聯繫我們的鏈接。

`order` 值總結

這裡有一個方便的表格，總結了我們討論過的不同 order 值：

值	描述
`<integer>`	任何正數或負數整數值
`initial`	將 `order` 設置為其默認值（0）
`unset`	對於 `order` 屬性，行為與 `initial` 相同
`revert`	重置為用戶代理的默認值（通常是 0）