試一試
order: 0;
order: 3;
order: -1;
order: 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">Box 1:</div>
<div style="order: 1">Box 2: <code>order: 1;</code></div>
<div style="order: 2">Box 3: <code>order: 2;</code></div>
<div style="order: 2">Box 4: <code>order: 2;</code></div>
<div style="order: 3">Box 5: <code>order: 3;</code></div>
</section>
.default-example {
max-height: 300px;
display: flex;
flex-flow: column;
}
.default-example > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
margin: 0.5rem;
padding: 0.5rem;
flex: 1;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
#example-element::after {
content: attr(style);
outline: 2px dashed;
font-family: monospace;
}
在上面的演示中，選擇左側的選項以更改粉色框的 order 屬性值。淺藍色框已給定固定的 order 值。
請記住源順序的影響。例如，當選擇 order: 2; 時，粉色框會放置在兩個 order: 2; 的藍色框之前。這是因為粉色框在原始碼中出現在藍色框之前。
語法
/* <integer> values */
order: 5;
order: -5;
/* Global values */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;
由於 order 僅用於影響元素的視覺順序，而非其邏輯或 Tab 鍵順序，因此它不得用於非視覺媒體，例如語音。
此屬性在 CSS display 模組中定義，僅影響網格和彈性專案。當在父元素的 display 屬性未建立彈性或網格容器的元素上設定 order 時，它不起作用。
值
<integer>-
表示專案將使用的序陣列。
無障礙
使用 order 屬性將導致內容視覺呈現與 DOM 順序之間出現斷開。這將對藉助螢幕閱讀器等輔助技術進行導航的弱視使用者產生不利影響。如果視覺順序與 DOM 順序不同，您的使用者將根據他們訪問內容的方式獲得不同的體驗。
- 彈性盒與鍵盤導航斷開，來自 Tink (2016)
- 源順序很重要，來自 Adrian Roselli (2015)
- 理解 WCAG，準則 1.3 解釋
- 理解成功標準 1.3.2 | W3C 理解 WCAG 2.0
正式定義
正式語法
order =
<integer>
示例
在彈性容器中對專案進行排序
在此示例中，我們建立了一個經典的雙側邊欄佈局。
HTML
我們包含了一個頁首、一個頁尾和一個主要內容區域。主要內容包含一篇文章和兩個側邊欄。請注意它們的順序！我們將使用 CSS order 屬性來改變它們的視覺順序。
<header>Header</header>
<main>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</main>
<footer>Footer</footer>
CSS
我們使用彈性盒佈局模組特性來樣式化主要區域；透過將 display 設定為 flex，<main> 元素成為一個彈性容器。預設情況下，這會建立垂直尺寸相等的彈性專案。兩個側邊欄都給定了一個絕對width，而<article>將透過 flex 簡寫設定的 flex-grow 因子，消耗所有正自由空間。
然後，我們為彈性容器的三個子元素中的每一個設定不同的 order 屬性值；這意味著 CSS 正在定義該元件的視覺順序，而不是它按 HTML 中宣告的順序出現。
main {
display: flex;
text-align: center;
}
main > article {
flex: 1;
order: 2;
}
main > nav {
width: 200px;
order: 1;
}
main > aside {
width: 200px;
order: 3;
}
結果
<article> 在源順序中首先出現，但在視覺上渲染在中間。
規範
| 規範 |
|---|
| CSS Display Module Level 3 # order 屬性 |
瀏覽器相容性
載入中…