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中文網其他相關文章！
