切換到Divi 5的flexbox佈局系統時要避免的5個陷阱

Divi 5剛剛運輸了其全額外彈性箱的佈局系統。它取代了Divi 4的舊塊佈局引擎，並在視覺構建器中解鎖了強大的新控件。現在，每一行默認為flex佈局。除非您已經使用了CSS Flexbox，否則此更改需要一種新的設計思維方式，因為Flex的工作方式不同。如果您不調整習慣，就會卡住。

此更新為您提供了用於包裝，方向，間距，訂購和對齊方式的視覺控制 - 全部內置。沒有駭人聽聞的自定義CSS。它還帶有預配置的行快捷方式，以最少的顯示設置來構建複雜的行結構。棄用了一些基於塊的功能，例如專業和全寬部分，因為Flex現在涵蓋了所有這些用例。

這篇文章進入了將心理模型從塊切換到Divi 5中的Flex時，您將遇到的五個最大的陷阱。

陷阱1：強迫Flex進入塊心態

→Flex需要一個新的心理模型，而不僅僅是新的控件。

除非他們知道自己達到了非常真實的局限性，否則沒有人喜歡改變。對於許多人來說，舊的佈局系統是他們所知道的和滿意的。但是它確實有其局限性。那些對CSS了解足夠多的人知道，舊系統缺少Flexbox設計用於補救的東西。避免第一次陷阱需要了解Flexbox不僅是帶有額外選項的塊佈局。

在Divi 4中，默認情況下垂直堆疊的模塊 - 每個元素都坐在一個元素之前。您可以用列水平堆疊東西，但是在那時，您可以在部分內與多個行 +列一起構建佈局。對於許多人來說，這是可以預測且舒適的，但這也導致了令人沮喪的現實，即無法並排兩個按鈕和其他設計挑戰。

Divi 5現在的工作方式有所不同，因為默認情況下，新容器（即，段，行，列和組）設置為“ flex”。您可以在集裝箱級別獲得更具體的選項，以安排子元素。 Flexbox具有功能強大，因為它允許在基於可用空間及其內部內容的元素位置的靈活佈局。在下一個陷阱中有關此的更多信息。這允許佈局適應不同的屏幕尺寸和內容，而無需依賴固定或絕對定位。這只是將Flex與Block進行比較的一個示例。

塊佈局沿塊軸垂直堆疊模塊。 Flexbox可讓您在行和列之間選擇作為主軸。

UI中的每個設置和選項都與添加到每個容器中的實際CSS屬性直接對應。

陷阱2：不知道Flex縮小和生長如何適合兒童元素的尺寸

→沒有收縮和成長，您的佈局不會像預期的那樣行事。

在Divi 5中的Flex中，兒童模塊可以具有設定的寬度或高度。此外，它們可以根據容器內的房間而收縮或填充（其寬度或高度）。在此示例中，文本模塊設置為45％的寬度，這意味著兩個模塊可以水平擬合，就好像在同一行中一樣。但是，如果我們添加奇數文本模塊，我們不希望有空的空間。我們可以將這些模塊設置為使Flex增長，然後在連續有可用的空間時，這些模塊將增長以填充。

Divi公開了“填充”，“縮小為適合”，以及任何flex容器中的子元素（子元素>設計>設計>尺寸>生長以填充，縮小，適合或定制）之類的控件。

如果您用來阻止佈局，則將兒童元素的高度和寬度設置為熟悉。但是，使用Flexbox，增長和收縮設置使您可以將固定尺寸與響應式行為相結合 - 適應每個容器中的可用空間。它增加了複雜性，但也可以解鎖更大的靈活性。

收縮以適合併成長以填充（除了彈性基本外）也非常方便幫助您創建響應式佈局。為了使塊佈局經常響應，您需要在每個斷點中的每個斷點設置多個斷點和寬度/高度。 Flexbox可以從各種斷點處的唯一設置中受益，但是顧名思義，它非常靈活。當使用clamp（）進行排版時，尤其是這種情況。將這兩個一起使用，以及其他相對CSS單元，將破壞您對斷點的不斷需求。

讓我們看一個使用Flexbox構建的示例。

列容器（parent）設置為使用以下設置：

• 水平和垂直差距：30px（這可以使用計算或夾具變得更好一點）
• 佈局方向：行反向（陷阱4中的此決定的說明）
• 證明內容：中心
• 對齊項目：中心
• Flex包裝：包裝反向（陷阱4中的此決定的說明）

然後，我將三個子元素放在列內。標題模塊，分隔模塊和文本模塊。這是每個相關設置：

• 標題模塊
  • 文本大小：夾具（2REM，1.5REM + 2VW，3REM）
  • 寬度：自動
  • 彎曲尺寸：收縮至適合
• 分隔器模塊
  • 寬度：自動
  • 彎曲尺寸：收縮以適合併成長以填充
• 文本模塊
  • 文本大小：夾具（0.9375REM，0.75REM + 0.4VW，1REM）
  • 寬度：自動
  • 彎曲尺寸：收縮至適合

有一個行彎曲方向，每當有房間時，子元素都會水平對齊。文本模塊是最寬的，因此它填充了自己的行。然後，由於它具有自動寬度，並且啟用了Flex Grow和Flex-Shrink，因此分隔器模塊會生長或收縮。標頭模塊僅使用其內在寬度並保持緊湊。此設置可產生完全響應的佈局，而無需任何斷點。

陷阱3：不打破邊距習慣

→改用縫隙 - 更聰明，更乾淨，並且可以彈性。

在Divi 4中，模塊和其他元素之間的視覺間隙需要邊緣（通過底部邊緣的垂直縫隙，通過左/右邊緣的水平間隙）。當差距應用於列間距時，Divi 4具有排水溝設置，但並未採用標準的CSS值，實際上它將邊距用於列的側面以創建間隙。這與塊佈局仍然可以正常工作一樣。但是現在有一種更清潔，更有效的方法。

Divi 5的Flexbox系統在設計>佈局>水平和垂直間隙下引入行和垂直間隙控件。這些映射到CSS間隙和行隙。當項目包裹到新線路上時，垂直差距會自動應用於每個“彈性行”。水平差距也是如此：每當彼此相鄰的子元素時，差距就會存在。這些差距設置還接受任何正CSS單元，因此您可以使用clamp（）或calc（）創建響應差距間隔。

這減少了將保證金值應用於每個子元素的需求。間隙設置會根據撓性方向和容器中的兒童數量自動調整，以自動應用任何縫隙。邊緣仍然有自己的位置，但是它們需要在容器內進行間距元素的需求減少。

陷阱＃4：逆向流程和訂購控件不足

→視覺順序和語義順序不必匹配。

默認情況下，Flex容器中的子元素將以其源順序顯示。 Flexbox和Divi 5使您能夠指定反向彈性方向和訂單控件，以更改元素的視覺流，而無需更改元素的HTML順序。

在佈局方向下，反向方向切換使您可以在行或列方向上逆轉元素的順序。要再次查看陷阱2中的佈局示例，我們可以看到為什麼要這樣做。您可以在以下圖層中看到子元素的順序是標題，然後是分隔線，最後是文本模塊。從語義上講，在堆棧頂部將標題（在這種情況下為H2）對於屏幕讀取器來說很有意義。但是，由於我們使用具有文本大小的視覺層次結構，因此標題在視覺上足夠明顯。

使用行反向作為彈性方向和包裝反向保留HTML訂購（對於可訪問性很重要），同時還可以設計我們如何設想的東西。

您可以使用子元素排序實現相同的操作，這可以在單擊子元素的設置>“內容”選項卡>訂單時在Divi中找到。我們可以更改僅此元素出現的順序。在此示例中，我們達到了相同的最終結果，但是使用不同的設置 - 這可能對某些人更有意義。

陷阱5：忘記設置包裹

→除非您告訴它，否則Flex不會闖入新行。

我們提到了較早的包裝，但它值得自己的部分。新的Flex容器默認為沒有包裝。這可能會帶來意想不到的後果。例如，如果添加四個兒童模塊，每個模塊寬度為50％，則希望它們在兩個Flex行上顯示。您的問題僅僅是您必須允許您的容器包裝。

Divi包含一個稱為佈局包裝的切換，該切換具有三個狀態：無包裝，包裝和包裝不轉換。如果您希望模塊在閾值下折斷新線條，則必須啟用包裝。這就是Divi支持單個容器內部多行結構的方式（嵌套或多行不是現在這樣做的唯一方法）。

花點時間主持flexbox

Divi 5中的Flex比Divi以前的僅限塊佈局系統更強大。但是，這需要一些學習才能理解。 Flexbox不是特定於Divi的設置，因此重要的是要了解該CSS工具的工作原理。 Divi使實施變得易於實現，因為您可以在CSS中應用的所有設置直接在編輯器中可用。但是這個概念與塊有很大的不同。

由於存在這些差異，我們強烈建議您使用交互式教學工具花一個小時來了解Flexbox。一個易於使用，真正解決問題的是FlexboxFroggy.com。它帶您經歷了24個逐漸復雜的挑戰，教您所有基礎知識。它比命令滾動一個小時要好得多。

今天使用flex 5

Divi 5中的Flexbox是誠實的。它沒有猜測你想要什麼。它要求您決定。但是，一旦決定，靈活性就會隨之而來。您可以在沒有自定義CSS或駭客的情況下，負責任，響應和可靠地（甚至無限地嵌套）構建每個佈局結構。