在 CSS 彈性布局(Flexbox)中,您可以使用 order
屬性來調整元素的順序。order
屬性接受一個整數值,表示元素的排列順序。值越小,元素越靠前;值越大,元素越靠后。當所有元素的 order
值相同時,它們將按照文檔流的順序排列。
以下是一個簡單的示例,說明如何使用 order
屬性調整元素順序:
HTML 結構:
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
CSS 樣式:
.container {
display: flex;
}
.item1 {
order: 3;
background-color: lightblue;
}
.item2 {
order: 1;
background-color: lightgreen;
}
.item3 {
order: 2;
background-color: lightcoral;
}
在這個示例中,我們有一個包含三個元素的容器。通過為每個元素設置不同的 order
值,我們可以輕松地調整它們在容器中的順序。在這個例子中,item2
將排在最前面,item3
排在其后,item1
排在最后。