<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
}
.box { padding: 20px; margin: 10px; background-color: lightblue; font-size: 20px; } </style> </head> <body>
</body> </html>
.box { padding: 20px; margin: 10px; background-color: lightblue; font-size: 20px; } </style> </head> <body>
關于CSS div順序的討論
在CSS中，div元素被廣泛用于創建不同的布局和設計。div元素是一個塊級元素，可以包含文本、圖像、表單等內容。通過CSS中的定位和布局屬性，我們可以改變div元素的位置、大小和順序。
1. 順序排列的div元素
當div元素按照默認順序排列時，它們會根據HTML中的結構順序出現在頁面上。例如，下面的HTML代碼演示了三個相鄰的div元素：
<div class="container"> <div class="box">第一個div</div> <div class="box">第二個div</div> <div class="box">第三個div</div> </div>
上述代碼中，我們使用了一個名為"container"的父元素div，它包含了三個子元素div，它們都使用了名為"box"的類。
在默認的情況下，這三個div元素會按照其在HTML中的結構順序依次出現。瀏覽器會解析這些元素并按照其在HTML源代碼中的出現順序進行布局。
2. 反向排列的div元素
通過CSS的"flex-direction"屬性，我們可以改變div元素的排列順序。當設置"flex-direction"為"row-reverse"時，div元素的排列順序將會反轉。即最后一個div元素將會排在最前面，而第一個div元素將會排在最后面。
下面的代碼演示了按照反向順序排列的div元素：
<div class="container" style="flex-direction: row-reverse;"> <div class="box">第一個div</div> <div class="box">第二個div</div> <div class="box">第三個div</div> </div>
3. 指定順序的div元素
除了改變div元素的默認順序和反向順序之外，我們還可以使用"order"屬性來指定每個div元素的排列順序。
下面的代碼演示了按照指定順序排列的div元素，其中第二個div元素將會排在第一個div元素的前面：
<div class="container"> <div class="box" style="order: 2;">第一個div</div> <div class="box" style="order: 1;">第二個div</div> <div class="box" style="order: 3;">第三個div</div> </div>
在上述代碼中，我們通過給每個div元素的樣式添加"order"屬性來指定它們的排列順序。"order"屬性的值越小，元素的排列順序就越靠前。
通過上述的代碼案例，我們可以看到如何使用CSS的flex布局來調整和改變div元素的順序。這給了我們更大的自由度來實現各種獨特的頁面布局。
</body> </html>