Flexbox、網格、Rapid Stack

在製作網站時，有多種選擇可用於建立網站佈局 - 透過利用 Webflow 元素和 CSS 顯示功能。 Flexbox 和網格是常用的顯示功能，而 Rapid Stack 是整合了兩者的 Webflow 元素。在本指南中，我們將探索在設計專案中利用 Flexbox、網格和 Rapid Stack 的最佳方案。

在整個教學課程中，您將深入了解：

1. Flexbox 的優勢
2. 網格的優勢
3. Rapid Stack 的優勢
4. 決定是否使用 Flexbox、網格或 Rapid Stack

Flexbox 的優勢

1. 提供一維佈局控制 - 垂直 或者 水平地
2. 允許調整對齊、間距和環繞
3. 提供對齊工具，用於有效對齊 Flex 子項
4. 允許子元素取代其佈局配置（例如大小、對齊方式、順序）
5. 適用於集合清單或表單區塊

了解有關 Flexbox 的更多資訊。

網格的優勢

1. 提供二維佈局控制 - 都是垂直的 和 水平地
2. 方便在網格邊界內的任何位置排列元素
3. 提供對齊工具，用於有效對齊網格子項
4. 允許手動定位網格子項
5. 允許子元素取代其版面設定（即位置、跨距、對齊方式、理由、順序）
6. 適用於集合清單或表單區塊

了解有關網格的更多資訊。

Rapid Stack 的優勢

1. 提供設定佈局的有效方法
2. 包含 8 個可自訂的預設 Rapid Stack 佈局
3. 儲存格為內容放置提供預先定義的 div 區塊
4. 結合網格和 Flexbox 加速開發

了解有關快速堆疊的更多資訊。

決定是否使用 Flexbox、網格或 Rapid Stack

我們的建議是從大多數佈局的快速堆疊元素開始。此元素用途廣泛且經過預先配置，包含一些最受歡迎的顯示功能（即彈性盒和網格）。然而，也有一定的限制。 Rapid Stack 無法像網格那樣重新定位或覆蓋單元格，而且您不能 申請 由於其具有現有佈局樣式的預先建構性質，因此可以快速堆疊到另一個元素。

對於複雜的二維設計，您希望在子元素上建立位置設定（尤其是重疊元素），網格是首選。與 Rapid Stack 不同，網格提供了更大的靈活性，並允許單元在網格佈局內移動。此外，網格的功能是作為顯示功能而不是元素，使您能夠 分配 grid 到其他元素，例如容器、div、表單區塊或集合清單。

當您尋求在單一維度管理佈局時，Flexbox 被證明是一個有價值的顯示功能。與網格類似，Flexbox 可以套用於其他元素，例如容器或 div。 Flexbox 提供了多種替代佈局配置（包括方向和對齊方式），並促進子元素的換行，以便它們在到達父元素的邊界時無縫過渡到下一行。

重要見解

• 對於二維設計，網格是一種更通用的選擇，而 Rapid Stack 則在效率方面表現出色
• 你可以 申請 grid 作為其他元素的顯示設置，而 Rapid Stack 是 具有預先存在的顯示設定的預先建置元素
• Flexbox 非常適合單一維度設計