如何針對不同的螢幕尺寸有效地重新排列 Flexbox 項目？

Flex Order 屬性：重新排列移動和桌面視圖的項目

管理容器內項目的佈局時，order 屬性以及Flexbox 可以是一個強大的工具。然而，當嘗試專門針對行動裝置和更大螢幕視圖重新排列專案時，可能會出現挑戰。

考慮以下場景：容器內有三個 div，在行動裝置上的順序設定為 2、1 和 3使用訂單屬性。這在行動裝置上效果很好。然而，在較大的螢幕上，順序會顯得不正確。

這個問題的根本原因在於 Flexbox 的本質。 Flexbox 旨在透過分配容器內的空間來對齊內容。在行換行容器中，項目必須換行到新行，這與專案可以任意換行的網格系統不同。

因此，在 Flexbox 容器中，項目 div3 無法換行到項目 div2 下方，因為它會建立一個網格 -喜歡佈局而不是直行。因此，行中不是最高的項目之間會出現間隙。

為了避免這些難看的間隙，請考慮使用列換行而不是行換行。在列換行容器中，項目換行到新列，從而允許 div2 和 div3 可以垂直對齊的佈局。

例如：

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 800px) {
    .container {
        flex-wrap: wrap;
    }
    div.orange {
        flex-basis: 100%;
        width: 50%;
    }
    div.blue {
        flex-basis: 50%;
        width: 50%;
        order: 0;
    }
    div.green {
        flex-basis: 50%;
        width: 50%;
    }
}

在此範例中，行動佈局保持2、1、3 的順序，而桌面佈局將項目重新排列為 1、2、3。間隙被消除，因為項目垂直換行而不是水平。

以上是如何針對不同的螢幕尺寸有效地重新排列 Flexbox 項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！