CSS order 屬性介紹：靈活控制元素的顯示順序

更新日期： 2024 年 11 月 4 日

在網頁佈局中，元素的順序通常由它們在 HTML 文件中的排列順序決定。

然而，有時我們希望在不改變 HTML 結構的情況下，調整元素的顯示順序，以適應不同的設計需求。

order 是 CSS Flexbox 中的一個屬性，允許我們輕鬆改變彈性容器內元素的顯示順序，使頁面設計更加靈活且易於維護。

order 屬性介紹

order 屬性專門用來定義 flex 容器（flex container）中子元素（flex item）的顯示順序。

每個子元素預設的 order 值為 0，當我們更改 order 值時，Flexbox 會根據此值來決定元素的排列順序。

數值越小的元素會排在越前面，數值越大的元素則會往後排列。

基本語法

order 的語法非常簡單，只需指定一個數值即可：

order: <integer>;

• <integer> 可以為正、負或 0（預設值）。
• 數值越小的元素會越靠前顯示。

order 的工作原理

在 flex 容器中，元素的顯示順序是根據 order 屬性的數值排列的，而非單純依照 HTML 結構的順序。

這表示我們可以輕鬆改變任意元素的顯示位置，而不必重新排列 HTML 中的代碼結構，這對於響應式佈局和動態介面設計非常有用。

例如，假設我們有一個容器內包含三個子元素：

<div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
</div>

在 HTML 結構中，item1、item2 和 item3 順序是固定的。

然而，透過 order 屬性，我們可以輕鬆地改變它們的顯示順序：

.container {
    display: flex;
}

.item1 {
    order: 2;
}

.item2 {
    order: 3;
}

.item3 {
    order: 1;
}

在此範例中，我們設定 item3 的 order 值為 1，使其顯示在最前面；而 item1 和 item2 的 order 值分別為 2 和 3，依序顯示在 item3 之後。

因此，顯示順序將變為 item3 → item1 → item2。

使用範例

例子 1：簡單的順序調整

假設我們希望在一個水平排列的容器中，把某個重要項目置於最前，而其他元素則根據需求排列，這時可以使用 order 屬性來調整順序：

<div class="container">
    <div class="item important">重要項目</div>
    <div class="item">項目 A</div>
    <div class="item">項目 B</div>
</div>

.container {
    display: flex;
}

.important {
    order: -1; /* 置於最前 */
}

.item {
    order: 0; /* 默認值 */
}

在這裡，important 的 order 設為 -1，將其移至最前，其他元素則依據預設 order 值 0 顯示在後面。

這種方式可以讓關鍵內容優先顯示，而不改變 HTML 結構的順序。

例子 2：響應式佈局中的靈活順序

在響應式設計中，我們經常需要針對不同螢幕大小調整元素順序。

例如，在桌面版頁面中，我們希望圖片顯示在文字的右邊，而在行動裝置上，則希望圖片顯示在文字的上方。

這時候 order 屬性可以協助我們達到此效果：

<div class="container">
    <div class="text">文字內容</div>
    <div class="image">圖片</div>
</div>

.container {
    display: flex;
}

/* 桌面版 */
.text {
    order: 1;
}

.image {
    order: 2;
}

/* 行動裝置 */
@media (max-width: 768px) {
    .text {
        order: 2;
    }

    .image {
        order: 1;
    }
}

在此範例中，我們設定 text 和 image 的 order 屬性。

桌面版時，text 的 order 為 1，image 為 2，所以圖片顯示在文字的右邊；而在行動裝置下，將 order 反轉，使圖片顯示在文字上方。

order 的使用注意事項

• 只對 Flexbox 有效：order 屬性僅在設定 display: flex; 的容器內生效，無法在一般區塊（例如 block 元素）或其他非 Flexbox 容器中使用。
• 過度使用會降低可讀性：雖然 order 可以靈活調整顯示順序，但過度依賴可能會使程式碼結構混亂，建議在需求明確時使用，避免頻繁改變元素順序。
• 影響無障礙性：改變顯示順序不會改變 HTML 結構順序，這意味著螢幕閱讀器等輔助技術仍會按照 HTML 結構讀取內容，可能影響到無障礙性。若設計針對無障礙性要求較高，建議考慮其他方式調整元素順序。

結論

order 屬性是 Flexbox 提供的一項強大工具，讓我們在不改變 HTML 結構的情況下自由控制元素的顯示順序。

這個屬性在響應式設計、動態介面以及特定排版需求中尤為實用。

然而，由於 order 屬性僅作用於 Flexbox 佈局，因此需先確保父容器設定了 display: flex;。

透過靈活應用 order，我們可以為頁面佈局帶來更多彈性，提升設計的便利性與可讀性。