內容目錄
我們玩WordPress重視的是編輯器，你可以選擇WordPress內建的古騰堡或者其他編輯器，以前大家開發思維都是 Section/Column 模式，近期新增 Flexbox Container 我覺得這是最棒的選定，而且元素模組結合 Flexbox Container模式，以前在設計的時候還有侷限，苦惱如何突破，現在很多編輯器選擇融合兩種，真是太棒了!讓我們先了解它們的背景與發展歷史，再深入比較它們的差異。
歷史背景
- Section/Column 模式WPBakery Page Builder、Divi Builder、Gutenberg、Beaver Builder、SiteOrigin Page Builder、Elementor 、Squarespace 和 Wix 等網站建站工具，都以 Section/Column 為核心布局模型，允許用戶通過將頁面分為多個「區塊」（Section）並在每個區塊中使用「欄」（Column）來控制元素的佈局，Section/Column 模式適合建立多行多列的排版，並可用來控制區塊和欄之間的間距、背景、邊框等，雖然靈活，但在複雜排版需求下可能會變得笨重，且調整對齊和順序時需要更多手動調整。
- Flexbox Container 模式
- 為了解決傳統 Section/Column 模式的局限性，Framer、Squarespace、Figma、Brizy、Oxygen Builder、Webflow、Elementor開始使用 Flexbox Container 模式。
- Flexbox Container 基於 CSS Flexbox，支持彈性佈局，能夠更靈活地調整子元素的對齊、順序、分佈，特別適合需要精細控制的排列（例如水平和垂直對齊、小元素的間距調整）。
- 由於其適應性強、占用資源較少，因此在響應式設計中更具優勢。
Flexbox Container 與 Section/Column 模式的差異
| 特點 | Section/Column 模式 | Flexbox Container 模式 |
|---|---|---|
| 佈局結構 | 多層結構：包含 Section、Column 和 Widget | 單層結構：僅包含 Container 和 Widget |
| 適用場景 | 適合多列布局、區塊分區明顯的頁面設計 | 適合小元素排列、精細對齊控制、水平和垂直的混合布局 |
| 對齊方式 | 每個 Column 的對齊需單獨設定，調整麻煩 | 提供主軸和交叉軸的對齊控制，更靈活直觀 |
| 響應式設計 | 需手動調整多個 Section 和 Column 設定來適配不同裝置 | 支持 Flex 排列自適應，移動設備上的響應性較佳 |
| 資源佔用 | 結構複雜，占用更多資源 | 結構簡單，佔用資源較少，更加高效 |
| 順序控制 | 無法輕易改變 Column 或 Widget 順序 | 支持 order 屬性，可靈活改變元素排列順序 |
| 空間分佈 | 固定間距設置，難以實現均勻分佈 | 支援 space-between、space-around 等均分佈選項 |
| 學習成本 | 更符合傳統布局邏輯，容易上手 | 基於 Flexbox 需要一些 CSS 基礎知識，靈活度高但學習成本稍高 |
Flexbox Container 的優勢
- 更精簡的結構：因為 Flexbox 僅需要 Container 和 Widget，不需要多層的 Section 和 Column，使得頁面結構更簡單。
- 多樣的對齊方式：可以控制主軸（水平或垂直）和交叉軸（垂直或水平）的對齊方式，適合小元素的精確控制。
- 更好的響應性：更適合不同裝置的自適應設計，尤其在手機和平板等小螢幕設備上更有效。
何時使用 Flexbox Container 或 Section/Column
- Section/Column 模式：適合傳統的多行多列設計，需要分區明確的內容結構，例如包含標題、圖片和文字介紹的頁面。
- Flexbox Container 模式：適合需要靈活布局的小元素排列，如按鈕組、圖示與標籤的排列，或是需要快速響應不同螢幕的情況。
綜合來說，Flexbox Container 提供了現代化、輕量且靈活的布局選擇，而 Section/Column 模式則適合傳統的多區塊、多欄佈局需求。根據頁面設計需求選擇適合的模式，能讓設計過程更加高效。
目前主流網站構建工具和平台在 Flexbox Container 和 Section/Column 模式上的使用情況的表格：
| 工具/平台 | Flexbox Container 支持 | Section/Column 支持 | 說明 |
| Elementor | ✅ 支持 | ✅ 支持 | 提供了兩種模式，Flexbox Container 用於更靈活的佈局，Section/Column 適合傳統多欄排版。 |
| Webflow | ✅ 支持 | ❌ 不支持 | 主打 Flexbox 和 CSS Grid 的佈局選項，沒有傳統的 Section/Column 模式。 |
| Oxygen Builder | ✅ 支持 | ❌ 不支持 | 支持 Flexbox 排列，專為高效設計和響應式佈局而設計，無傳統的多欄模式。 |
| Brizy | ✅ 支持 | ✅ 支持 | 提供了兩種佈局模式，Flexbox 用於更細緻的佈局控制，傳統模式則適合簡單排版。 |
| Figma | ✅ 支持 | ❌ 不支持 | 在框架設計中使用 Flexbox 佈局，有助於 UI 設計的自適應排列和對齊。 |
| Squarespace | ✅ 支持（部分模板） | ✅ 支持 | 部分新模板支持 Flexbox，但主要依然使用 Section/Column 模式。 |
| Framer | ✅ 支持 | ❌ 不支持 | 支持 Flexbox 排列，特別適合互動設計和動態排版，無傳統多欄模式。 |
| Builder.io | ✅ 支持 | ❌ 不支持 | 支援 Flexbox，設計過程中能自由控制元素的排列和響應式布局。 |
| Gutenberg（WordPress） | ✅ 支持（部分區塊） | ✅ 支持 | 支持簡單的 Flexbox 排列功能，如 Group 和 Columns 區塊，也保留傳統的多欄佈局。 |
| Beaver Builder | ✅ 支持 | ✅ 支持 | 支援 Flexbox 的同時保留傳統 Section/Column 模式，滿足不同用戶的需求。 |
| Tilda | ✅ 支持（部分區塊） | ✅ 支持 | 支援 Flexbox 的同時，保留傳統的區塊設計方式，適合簡單到中等複雜度的網站構建。 |
| Notion | ✅ 支持（部分區塊） | ❌ 不支持 | 在表格、面板等結構中有類似 Flexbox 的佈局，支持簡單的排列和對齊。 |
| WPBakery Page Builder | ❌ 不支持 | ✅ 支持 | 仍然依賴傳統 Section/Column 模式，未加入 Flexbox 支援。 |
| Divi Builder | ✅ 支持 | ✅ 支持 | 雖然傳統上依賴 Section/Column，但已逐漸引入 Flexbox 排列功能。 |
| Weebly | ❌ 不支持 | ✅ 支持 | 主要使用傳統的多欄佈局模式，未加入 Flexbox 支援。 |
