如何根據螢幕尺寸對 Flexbox 佈局中的 Div 重新排序而不隱藏或顯示元素？

如何使用Flex Box 重新排序Div：深入探索

追求在Web 中保持SEO 友善性和語義結構設計中，開發人員常常努力避免在不同位置顯示重複的元素。使用 Flexbox 佈局時，此任務會帶來挑戰，特別是在重新排序 div 時。

重新排序挑戰

使用者的場景涉及具有特定佈局的網站涉及三個div：頂部/右側div、中心/左側div 和底部/右側div。在桌面上，div 應垂直居中，而在行動裝置上，它們應垂直堆疊。

使用者的限制包括：

• 不應根據視窗寬度隱藏或顯示任何 div .
• Div 具有可變高度。
• 需相容於 IE11。

Flexbox 限制

傳統上，Flexbox 不能只根據螢幕尺寸處理 div 的重新排序。然而，根據具體情況，存在潛在的妥協。

固定高度的純 CSS 解

對於 div 具有固定高度的情況，可以實現使用 CSS 進行所需的重新排序。解決方案包括將 div 包裝在 Flex 容器中，並將 order 屬性套用至應重新排序的 div。在這種情況下，中心/左側 div 在桌面上的順序為 -1，以確保它出現在頂部/右側 div 的前面。此外，偽元素用於創建以桌面為中心所需的空間。

解決響應性

對於響應式設計，可以應用額外的 CSS 規則來處理不同的佈局。例如，當視窗小於 768px 時，Flex 容器可以切換到垂直方向，並且所有 div 的順序重設為 0。

結論

雖然通常不可能單獨使用Flexbox 重新排序div，但在特定情況下可以透過利用固定高度或根據螢幕尺寸妥協佈局來解決這些限制。開發人員必須仔細考慮其專案的特定要求，並探索潛在的解決方案，以實現所需的佈局，同時保持語義完整性。

以上是如何根據螢幕尺寸對 Flexbox 佈局中的 Div 重新排序而不隱藏或顯示元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！