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

使用CSS 根據裝置寬度動態重新排序Div

建立響應式網站時，管理元素的顯示和順序變得至關重要。當 div 需要根據螢幕寬度重新排序時，就會出現一個常見的挑戰。雖然這個任務可以用更少的 div 輕鬆完成，但隨著數量的增加，它會變得更加複雜。

建立具有兩個 Div 的欄位

讓我們從一個簡單的場景開始兩個並排的 div。最初，我們可以使用 CSS 建立兩個欄位：

.container {
  width: 80%;
  margin: 0 auto;
}

.column-half {
  display: table-cell;
  padding: 25px;
  vertical-align: top;
  width: 40%;
}

.column-half-1 {
  float: left;
}

.column-half-2 {
  float: right;
}

這種方法在較寬的螢幕中並排放置 div，但當螢幕太窄時將它們垂直堆疊。

四列挑戰

將此方法擴展到四列會出現問題。透過使用浮動，我們可以建立水平對齊的四個欄位。然而，這個順序在較窄的螢幕上無法輕易更改。

使用 Flexbox 的解決方案

這個問題的解決方案在於 Flexbox 屬性、'order' 和 '彈性流'。 Flexbox 允許我們控制行和列中元素的佈局和順序。使用這些屬性，我們可以在較窄螢幕中定義div 的順序，而不會影響較寬螢幕中的佈局：

.container {
  display: flex; /* Switches to a flex layout */
  flex-flow: column; /* Stacks elements vertically in narrower screens */
}

.column-quarter {
  width: 25%; /* Adjust percentage based on the number of columns */
}

.column-quarter-1 {
  order: 3; /* Defines the order in narrower screens */
}

.column-quarter-2 {
  order: 2;
}

.column-quarter-3 {
  order: 1;
}

.column-quarter-4 {
  order: 4;
}

此解決方案可確保在螢幕寬度允許時，div 顯示為行，然後自動重新排序當螢幕變窄時，根據指定的順序分成列。此方法有效解決了動態管理行和列佈局中 div 順序的挑戰。

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