如何垂直與Divi 5的Flexbox佈局系統保持一致

在現代網絡設計中創建視覺平衡且響應迅速的佈局至關重要，Divi 5的新Flexbox佈局系統比以往任何時候都更容易實現垂直對齊。這項強大的新功能使Divi用戶可以設計靈活的動態佈局，從而對垂直定位提供完全控制。無論是在部分中對齊文本，在多列行中平衡內容，還是創建響應式設計，Divi 5都可以通過直接構建在視覺構建器中的直觀控件來簡化該過程。

在這篇文章中，我們將介紹掌握垂直對齊的步驟，提供真實的示例，並提供創建響應迅速，拋光佈局的技巧。讓我們探討Divi 5的Flexbox佈局系統如何將您的方法轉換為垂直對齊。

了解Divi 5的Flexbox佈局系統

Flexbox或Flexible Box佈局是CSS佈局模型，旨在簡化容器中元素的佈置，使其非常適合水平和垂直對齊。與傳統方法（如浮子或邊距）不同，Flexbox為組織內容提供了一種直接的方法。它允許元素根據容器的尺寸和視口動力調整其尺寸，順序和對齊方式，以確保佈局在所有屏幕尺寸上保持一致並響應。

使用FlexBox，您可以輕鬆地將內容中心內容，平均分配空間或以特定順序分配元素。這種靈活性使網絡設計師必須是必須的，並且Divi 5利用其功能，允許用戶創建複雜的佈局而無需CSS的高級知識。

Divi 5如何集成Flexbox

Divi 5最近引入了其Flexbox佈局系統。該系統將Flexbox直接集成到視覺構建器中，從而允許用戶使用直觀設置來控制部分，行，列和模塊佈置。

關鍵功能包括各種新的行模板，從單列到多行部分，使在Divi中構建佈局比以往任何時候都更容易。

Divi 5的Flexbox控件使您可以控制佈局的方向，調整水平和垂直間隙，證明內容為開始，中心或結束，啟用包裝等。

Divi 5的新更改列結構功能使您可以更多地控制列在較小的設備上的行為方式。您可以輕鬆更改列數或重新排序，使設計在任何屏幕尺寸上看起來都很好。

Divi 5偏離了專業和全寬部分，因為現在可以將行相互嵌套以創建複雜的，響應迅速的設計而不依賴於過時的部分類型。這些進步使Divi 5的Flexbox佈局系統成為直接在構建器中構建現代，適應性佈局的強大工具。

在Divi 5中設置垂直對齊

Divi 5的Flexbox佈局系統已無縫集成到視覺構建器中，使用戶可以訪問靈活且響應迅速的設計。首先，在新的或現有的頁面上打開視覺構建器，然後添加部分和行。我們已經創建了整個佈局，因此我們可以在各種情況下逐步逐步對齊項目。

部分垂直對齊

在本節的設置中，導航到“設計”選項卡並找到佈局選項，您可以在其中找到Flexbox控件。

確保在佈局樣式下選擇Flex 。這確保了該部分啟用FlexBox。

默認情況下，啟動（Flex-start）是在合理內容下選擇的。這將在容器開始時對齊所有項目。在此示例中，當想要垂直中心的項目中心時，您可以選擇將它們對齊到中心，周圍或空間均勻。由於我們有一個帶有嵌套行的單行，因此我們部分中的所有設計元素將以上述任何選項為中心。

垂直對齊

您還可以在行級別垂直對齊內容。但是，在此示例中，我們將使用對齊項目而不是證明內容合理以垂直對齊行中的模塊。在該行的“設計”選項卡中，找到佈局設置。確保啟用Flex並找到對齊項目設置。默認情況下，選擇“啟動” ，這將行中的所有模塊與容器頂部對齊。

有一些選擇，具體取決於您要如何對齊元素。如果您希望行中的項目垂直中心，請選擇中心。選擇結束時，所有項目都將與行底部保持一致。拉伸使所有物品都充滿了行的高度。

多排截面的垂直對齊

在這種情況下，我們在一個部分中有三行，包括單列行和兩行。我們將使用合理的內容設置來垂直對齊行中的所有內容。

當一節使用列作為佈局方向時，合理的內容將垂直對齊其行。默認情況下選擇開始。它將所有行與部分頂部保持一致。這些行將從頂部邊緣開始包裝在一起。中心在垂直部分中對齊所有行。行將從底部邊緣開始包裝在一起。當您選擇末端時，所有行都與部分的底部對齊。這些行將從底部邊緣開始包裝在一起。

沿主軸（垂直）均勻分佈行之間的空間。第一行將沖洗到截面的頂部，最後一行與底部的排成一行，而兩者之間的任何行都將具有相等數量的空間將它們分開。周圍的空間在每個項目周圍都有相等空間的行分佈行。

相鄰行之間的空間將是行末端（第一行之間和部分頂部之間的空間，以及最後一行和部分底部之間的空間）。最後，空間均勻地與周圍的空間相似，但是它確保每行之間的空間相同，並且截面的開頭和末端的空間也等於該間距。

模塊組的垂直對齊

Divi 5的Flexbox系統還簡化了模塊組中的垂直對齊，尤其是在使用Loop Builder之類的功能進行動態內容時。考慮一個模塊組，顯示帶有圖像，帖子標題，帖子摘錄和按鈕的博客帖子。如果沒有適當的對準，諸如按鈕之類的元素可能會在各列中看起來不對。在以前的Divi版本中，此需要相等的列高度和自定義CSS。 Divi 5使用Flexbox簡化了此過程。

要對齊元素，請單擊模塊組的第一列，導航到“設計”選項卡，然後找到flex設置。將合理的內容設置為之間的空間。這均勻地分佈了列內的​​模塊，完美地對準了所有無自定義CSS的所有列的閱讀按鈕。這種方法可確保動態內容（例如博客網格或產品列表）的一致，專業的佈局。

下載文件

免費下載

加入Divi新聞通訊，我們將向您發送終極Divi著陸頁佈局包的副本，以及大量其他驚人和免費的Divi資源，提示和技巧。跟進，您將立即成為Divi大師。如果您已經訂閱，則只需在下面的電子郵件地址中輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲取免費的每週Divi佈局包！

響應式垂直對齊的提示

Divi 5的Flexbox佈局系統使垂直對齊內容變得容易，但是有一些技巧需要考慮。 Divi 5提供了可響應設計的強大工具，使您可以在所有設備上微調垂直對齊。無論您是將內容集中在英雄部分中，還是在多列佈局中對齊按鈕，以下技巧都將幫助您利用Divi 5的功能來保持一致，專業的佈局。

使用Divi 5的可自定義響應式斷點

Divi 5的Flexbox系統允許您自定義不同屏幕尺寸的模塊訂購和對齊，以確保您的佈局適合所有屏幕尺寸。在Visual Builder中，您可以使用七個可自定義的響應式斷點來控制佈局在設備之間的顯示方式。

為了優化垂直對齊，您可以在平板電腦和移動設備上調整列結構。這樣可以確保您的佈局在每個屏幕尺寸上看起來都完美。例如，您可能需要在平板電腦上的兩列，而在移動設備上只需一列。

Divi 5的Flexbox佈局系統還允許您更改移動設備上的列順序，從而控制移動用戶在部分或行中首先看到的內容。

使用Divi 5的設計變量

Divi 5的設計變量功能非常適合保持跨響應視圖的一致間距和對齊。設計變量允許您定義諸如填充，邊距和字體大小之類的屬性的可重複使用值，從而確保佈局均勻性。對於垂直對齊，您可以創建一個用於垂直填充的變量，以在行或截面內標準化間距。例如，在Divi的變量管理器中將名為垂直填充的設計變量設置為30px 。

要將變量應用於行，請導航到“設計”選項卡，單擊“間距”下拉菜單，然後單擊“動態內容”圖標以使用它。

Flexbox使垂直對齊變得容易

Divi 5的Flexbox佈局系統使垂直對齊變得容易，為創建拋光佈局提供了靈活而響應的解決方案。通過將FlexBox集成到視覺構建器中，Divi 5允許用戶精確地控制部分，行，列和模塊組的對齊，而無需CSS的高級知識。它的功能可確保在所有設備上進行一致的專業設計。無論您是居中內容，對齊動態模塊組還是構建多行佈局，Divi 5在提供結果的同時簡化了該過程。

下載最新的Divi 5 alpha，並在一個新項目上使用Flexbox佈局系統進行實驗。