如何使用 CSS Flexbox 根據螢幕寬度重新排序 Div？

使用CSS 更改Div 順序，取決於設備寬度

創建響應式網站時，可以在不同設備上保持所需的佈局一個挑戰。其中一個問題是螢幕尺寸變化時 div 的重新排列。雖然在較小的螢幕上垂直堆疊 div 很簡單，但根據佈局對它們進行不同的排序可能會更複雜。

例如，讓我們考慮一個具有兩列 div 的場景。在較大的螢幕上，div 水平顯示，但當螢幕寬度變窄時，它們會垂直堆疊。但是，我們要求垂直佈局中的 div 有特定的順序。

傳統上，將使用 JavaScript 來執行此類任務。然而，在這種情況下，JavaScript 不是一個選項。因此，我們轉向多功能的 CSS flexbox 規範來實現我們的目標。

使用 'order' 和 'flex-flow' 屬性，我們可以建立滿足我們要求的佈局。請注意，所有常青瀏覽器和 IE11 都支援此解決方案，儘管有 IE10 的供應商前綴。

在我們的 CSS 中，我們定義了 div 屬性，例如寬度、高度和內聯塊顯示。我們還為每個 div 分配顏色類別。

接下來，我們定義一個媒體查詢，當螢幕寬度降至 531 像素以下時啟動。在此查詢中，我們將容器的顯示屬性修改為“flex”和“column”，確保 div 在較窄的螢幕上垂直堆疊。

然後，我們指定 div 在垂直方向上顯示的順序佈局。使用 'order' 屬性，我們為應該出現在垂直堆疊頂部附近的 div 分配更高的順序值。

這是一個說明性範例：

.container div {
  width: 100px;
  height: 50px;
  display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .five { order: 1; }
  .four { order: 2; }
  .three { order: 3; }
  .two { order: 4; }
  .one { order: 5; }
}

<div class="container">
  <div class="one">I'm first</div>
  <div class="two">I'm second</div>
  <div class="three">I'm third</div>
  <div class="four">I'm fourth</div>
  <div class="five">I'm fifth</div>
</div>

以上是如何使用 CSS Flexbox 根據螢幕寬度重新排序 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！