了解Divi 5中的每個彈性箱設置

Flexbox和Divi 5是一個強大的二重奏，使Divi用戶能夠創建令人驚嘆的響應式佈局。在這篇文章中，我們將提供理解和使用每個Flexbox設置的最終指南，以輕鬆創建靈活的，響應迅速的佈局。

Flexbox是Divi 5改建的視覺構建器的核心，使用戶可以通過無與倫比的控制構建令人驚嘆的設計。 Divi 5的Flexbox佈局系統使復雜的佈局變得輕而易舉，從對齊內容到構建動態網格。

讓我們潛水。

什麼是flexbox？

Flexbox是CSS佈局模型，旨在使容器內的安排，對齊和分發元素在容器中，即使它們的尺寸是動態的，也是如此。與依靠浮子或定位的傳統CSS佈局不同，Flexbox提供了一種直觀的方式來構建靈活和響應式設計，使其成為現代網絡開發的基石。

訂閱我們的YouTube頻道

Flexbox的關鍵概念

Flexbox圍繞幾個基本概念運行：

• Flex容器：具有顯示的父元素：應用Flex或Inline-FLEX ，建立Flex內容。該容器決定其子女在佈局中的行為。
• Flex項目： Flex容器的直接子女，根據容器的Flex屬性進行排列和對齊。
• 主軸和橫軸： Flexbox沿主軸（水平為行或垂直為列）和垂直橫軸運行。主軸的方向可以適應不同的模式，例如從左到右，為全球設計提供了靈活性。

Divi 5中的Flexbox：一個新時代

Divi 5的Flexbox佈局系統內置在視覺構建器中，使Divi用戶可以使用直觀控件創建響應式佈局。這些設置主要應用於各節，行，列和模塊組，使您可以在不編寫CSS的情況下在視覺上操縱佈局行為。 Flexbox使對齊，重新排序和輕鬆轉換元素變得容易。

訪問Divi 5中的Flexbox

在Divi 5中訪問Flexbox是直接而直觀的。打開視覺構建器，添加新的行，然後前往“設計”選項卡。您會在佈局下拉下找到flexbox設置。

這些設置在Flex容器級別（部分，行等）上應用，以控制其Flex項目的行為。 Divi的界面通過用戶友好的選項顯示設置，從而使所有技能級別的用戶易於使用Flexbox。

讓我們遍歷每個設置，以便您可以更好地了解它們的工作方式以及如何使用它們來構建佈局。

Divi 5中Flexbox設置的詳細分解

以下是Divi 5中每個與FlexBox相關的設置的指南。每個設置都包含其目的，可用選項和實際用例，以幫助您有效地應用它們。

佈局樣式

FLEX是佈局樣式下拉菜單中的默認選項。當您將容器設置為Flex時，它將變成一個Flex容器。然後，可以使用CSS Flexbox屬性靈活對齊其直接的子元素（Flex項目）。

另一方面， Block是Divi過去的傳統方式。塊容器中的元素被視為塊級元素。這意味著它們通常垂直堆疊，佔用父容器的完整寬度。

水平和垂直間隙

在Divi 5的Flexbox設置中，水平和垂直差距控制起作用，充當CSS GAP屬性。它們提供了一種有效的方法來在容器內的子元素之間增加一致的間距。

水平差距定義了彈性項目水平排列時的空間。在下面的示例中，水平差距在每列之間創建空白空間，而不是在Flex容器的外邊緣上創建空白。默認情況下，選擇％，但是您可以在此處使用Divi 5的CSS屬性中的任何一個。

垂直差距定義了項目行之間的空間。當您啟用佈局包裝（稍後再詳細介紹）時，這將變得非常重要。當佈局方向設置為列或列反向時，它也適用。

佈局方向

Divi 5中的佈局方向選項（CSS中的撓性方向屬性）是最基本的控件之一。它確定了將安排容器內的子元素的主要軸。

將其視為設置內容的流程。有四個主要選擇：行，行反向，列和列反向。行是最常見的設置。 Flex項目將從左到右水平排列。它是創建傳統的水平列佈局，導航菜單，並排元素或任何希望物品在頁面上流過的時間的理想選擇。

通過行反向，項目仍然水平排列，但方向相反。

當您選擇列時，項目將垂直排列，從上到下。這是將模塊堆疊在單列中，創建內容垂直列表或構建元素需要向下流動的佈局的好選擇。

列反向工作與列相同，將項目垂直在容器中堆疊，但相反。

證明內容合理

Divi 5的合理內容選項（CSS中的合理性屬性）控制沿Flex容器的主軸的Flex項目對齊。

選項包括啟動（CSS中的flex-start），將項目與主軸的開頭保持一致。中心將項目對齊到主要訪問的中間。當您使用佈局方向>行時，項目將水平居中。如果使用佈局方向>列，則項目將垂直中心。結束將項目對準末端（根據您的行或列選擇，右或底部）。

在沿主軸上均勻分配項目之間的空間。第一項與開始對齊，而最後一個項目與容器的末端對齊。周圍的空間沿主軸均勻分佈，每個項目周圍都有相等的空間。最後，空間平均分發項目，其中兩個相鄰項目之間的間距以及第一個項目和最後一項之後的空間是相同的。

對齊項目

Divi 5的Flexbox設置中的“對齊”項目選項（Align-Intems css屬性）控制flex項目如何沿Flex容器的互軸對齊。此選項不同於合理的內容，該內容將項目沿主軸對齊。

當您將佈局方向設置為行或行反向時，橫軸變為垂直。這允許對齊項目控制一行中項目的垂直對齊。如果將佈局方向設置為列或列反向，則橫軸是水平的。因此，對齊項目將控制列中項目的水平對齊。

有四個主要選項，包括開始，將項目與開始，中心，結束和伸展的項目保持一致，這些項目延伸物品以填充沿容器的跨軸的全部可用空間。分配的特定高度或寬度的項目將覆蓋拉伸。

佈局包裝

在Divi 5的Flexbox設置中，佈局包裝（Flex-wrap CSS屬性）確定當Flex容器中的flex項目用光空間用盡空間時會在空間緊張時將其包裹在下一行上時會發生什麼。 Divi 5中有三個選項，包括沒有包裝，包裝和包裝反向。

默認設置沒有包裝，它告訴Flex容器嘗試將所有Flex項目都安裝到單行或列上，而不管可用的空間如何。如果物品太寬而無法合適，它們將溢出容器（超越邊界）或收縮以適合。如果元素超過了行上的分配空間，則允許元素將其包裹在新線路或列上。包裝反向與包裝類似，但是當將其包裹到下一行時，它們朝相反的方向這樣做。

在模塊級別的flex控件

除了在部分，行和列級上具有FlexBox控件外，Divi 5還為您提供了對單個Divi模塊的精確控制。例如，使用組模塊時，您可以調整間距（gap），佈局方向以及Divi 5的所有其他Flexbox設置。

Flexbox的優點

Divi 5中的Flexbox不僅是技術升級。它提供了一種更好，更有效地構建現代，響應式網站的方法。通過將FlexBox集成到視覺構建器中，Divi 5允許所有技能級別的用戶無需編寫代碼即可利用CSS的功能。這是Flexbox是Divi 4的有影響力升級的一些原因：

直觀的無代碼佈局控件

Divi 5將Flexbox設置直接集成到視覺構建器中，讓您使用簡單的選項調整對齊，間距和訂購。無論您是創建相等的列高度還是垂直居中，Flexbox都使復雜的佈局變得容易。

更好的響應設計

Divi 5的Flexbox佈局系統使響應式設計變得輕而易舉，這要歸功於台式機，平板電腦和智能手機的可定制佈局控件。 Divi的更改列結構選項使您可以更改平板電腦和智能手機上的列數，同時將佈局的列結構完好無損。

Flexbox +嵌套行

在Divi 5中將嵌套行和Flexbox結合在一起，您可以輕鬆構建複雜的多層次佈局。例如，您可以使用包含自己的行的列創建一行，從而啟用複雜的設計（例如網格或分層內容部分）。

Flexbox +模塊組

Divi 5中的模塊組充當彈性容器，使您可以作為凝聚力單元的樣式和位置組模塊進行樣式和位置組模塊。這使得創建動態部分（例如功能框或推薦卡）變得簡單，該部分會自動適應內容變化，同時保持一致的間距和對齊方式。

改善性能和簡單性

通過用統一的基於Flexbox的系統替換Divi 4的專業和全寬部分，Divi 5簡化了設計過程，降低了複雜性和提高性能。這意味著加載時間更快，並且具有更順暢的編輯體驗，尤其是對於大型或內容豐富的網站。

快速啟動的預構建Flexbox模板

Divi 5介紹了利用Flexbox的新行模板，以提供預定義的靈活佈局，例如相等的列，偏移列，多行網格和多柱網格。這些模板可以激發創造力，使您可以通過Flexbox設置使用完全可定制的結構來跳動設計。

未來的設計工作流程

隨著Divi 5在其公共alpha階段的發展，其Flexbox佈局系統將Divi用戶定位在現代網絡設計的最前沿。通過現在掌握Flexbox，您將配備與行業標準相符的技能，以確保您的網站能夠適應以後的更新。

Divi 5中使用Flexbox解鎖創意潛力

Divi 5中的FlexBox改變了用戶構建響應式，動態佈局的方式。 Divi 5允許用戶創建令人驚嘆的現代網站，而無需編寫代碼，通過將強大的CSS Flexbox屬性集成到視覺構建器中，而無需編寫代碼。從直觀的對齊和間距控件到嵌套行和模塊組等高級功能，Flexbox佈局系統簡化了複雜的設計，同時確保在所有設備上看起來都很好。