如何在Divi 5中使用Flexbox創建相等的列高度

創建乾淨，專業的佈局是有效的Web設計的基石，相等的柱高度有助於平衡的佈局。無論您是顯示產品，服務還是投資組合項目，都可以完美地促進用戶體驗。在Divi 4中，相等的列是可能的，但是Divi 5在表中帶來了更多。

在Divi 5中，其Flexbox佈局系統的集成改善了過程，提供了一種更簡單，更靈活的方式來創建相等的列高度。這篇文章將指導您創建乾淨，平衡的佈局。讓我們潛入！

Divi 4中相等的柱高度

在Divi 4中，以相等高度實現圓柱很簡單，但有限。一個切換啟用了一行中的所有列，以匹配最高列的高度。此功能是維持視覺一致性的救生員，但是它的局限性通常需要解決方法。

Divi 4中的相等高度效應應用於列容器，這意味著必須在列級設置背景顏色，圖像或邊框。這種方法沒有擴展到列內的模塊，這可能會導致尷尬的間隙。例如，一個列中的短文本模塊下面的一個按鈕將在其下方留出尷尬的空間，而另一列中較長的文本模塊下方的一個按鈕填充了它，從而產生了不平衡的外觀。

當設計人員想要更多的控制權，例如垂直對齊模塊內容或調整間距，通常需要定制CSS。這構成了一個挑戰，尤其是對於初學者而言，他們必須深入研究Divi的自定義CSS領域才能取得拋光結果。例如，如果您希望按鈕與Divi 4中的列底部對齊，則必須使用CSS來實現它。

Divi 5中的FlexBox如何地址相等的列

Flexbox無縫集成到Divi 5中，從而使創建相等的列高度更容易實現。與Divi 4的基於切換的選項不同，Divi 5 Leverages Flexbox提供內置控件，使設計網頁更容易。

使用Flexbox，您可以自動拉伸列以匹配最高的列，同時為這兩個列及其內容提供精確的對齊選項。這消除了對自定義CSS的需求，使初學者和專業人士都可以為每個Divi用戶提供高級佈局。 Divi 5的Flexbox佈局系統允許設計人員輕鬆創建一致的專業設計。

如何在Divi 5中創建相等的列高度

由於其Flexbox集成，在Divi 5中創建具有相同高度的列是輕而易舉的。在下面的步驟中，我們將演示如何設置物品並確保一切都完美排隊。

步驟1：創建設計

在新頁面或現有頁面上打開視覺構建器。單擊黑色 +圖標以添加新行。

當出現新的部分對話框時，在相等的列下選擇三列佈局。

在第一列中添加組模塊。

接下來，將圖標模塊添加到第一列中的組模塊中。

在“內容”選項卡中選擇“檢查圖標” 。

在“設計”選項卡中，將圖標顏色設置為＃2EA3F2 圖標尺寸為36px。

接下來，在圖標模塊下方添加一個標題模塊。請確保通過單擊黑色 +圖標而不是灰色圖標將標題添加到組模塊中。

在“內容”選項卡中鍵入Web Design作為標題。

在“設計”選項卡中，選擇H5作為標題級別，作為標題字體，將中等作為標題字體重量。將標題字體樣式設置為大寫，將文本對準向左，標題文本顏色為＃000000 ，並將標題文本大小保持在16px的默認大小。

接下來，在組模塊內的標題下方添加一個文本模塊。您可以保持設置狀態。

我們將為列中的最終模塊添加一個按鈕模塊。但是，我們沒有將其添加到組模塊中，而是將其添加到下面。這將使我們能夠創建相等的列高度，但將按鈕對準底部，從而使設計更加凝聚。

單擊“設計”選項卡，然後將所需的樣式設置分配給按鈕模塊。通過查看左側菜單中的“圖層”視圖來檢查您的按鈕以確保其在組模塊之外。完成後，該按鈕應看起來像下面的屏幕截圖 - 左與藍色背景和白色文本相符。

步驟2：複製列

一旦第一個列填充了內容，我們將將內容從第一列複製到第二和第三列，並進行一些更改。您可以刪除第二列和第三列，並複制第一個和第一個列，或將組模塊和按鈕複製並粘貼到第二和第三列中。

接下來，將第二列中的標題標題更改為編碼，以及第三列中的標題標題。我們還將在第二列中刪除文本模塊中的某些內容，因此我們可以演示Divi 5如何處理具有不同內容長度的Flexbox。如您所見，這些列是不平衡的。

在進入下一步之前，請單擊第一列，然後在列的所有側面添加25px間距。

我們還將添加15px邊框半徑和1PX邊框寬度， ＃666666作為顏色。

設計行的最後一步是將設計屬性從第一列複製並粘貼到其餘列中。右鍵單擊第一列，然後選擇“複製項目樣式” 。接下來，右鍵單擊第二列上，然後選擇“粘貼”項目樣式。還重複第三列的動作。

步驟3：為等高配置Flexbox設置

接下來，我們需要為行配置我們的Flexbox設置。 Divi 5將Flexbox控件集成到其佈局系統中，超越了Divi 4的均衡列高度切換。導航到該行的“設計”選項卡，並確保在佈局下選擇Flex 。

接下來，確保在佈局方向下選擇該行，在合理的內容下啟動，然後在對齊項下選擇strave 。這將告訴Divi 5保持列結構，對準左側的所有項目，並填充父容器內的可用空間。

接下來，單擊第一列的設置。單擊佈局下拉菜單以在“設計”選項卡中顯示其設置。默認情況下，將在佈局下選擇FLEX 。在佈局方向字段中，選擇列。在合理的內容之下，選擇之間的空間。將所有項目對齊到開始（左），並將佈局包裝設置為沒有包裝。

重複上述第二列和第三列的步驟。您也可以使用複制/粘貼或擴展功能將相同的設置應用於行的其餘列。

組中的所有模塊都將被拉伸以填充可用空間，並且組外部的按鈕將對齊底部。

步驟4：測試響應能力

Divi 5的可自定義響應式斷點使您可以輕鬆確保在所有設備上相等的列高度看起來都很好。使用響應視圖切換在視覺構建器中預覽您的佈局。默認情況下，有三個斷點。但是，Divi 5現在有7個，可以通過單擊Visual Builder頂部的工具欄中的省略號菜單來輕鬆啟用。啟用您想要的斷點，然後單擊“保存”以應用它們。

單擊以在平板電腦視圖中預覽您的佈局。如您所見，Flexbox將列並排堆疊。

您可以更改列結構以允許列垂直堆疊在較小的設備上。在平板電腦斷點中，單擊“行的內容”選項卡。單擊更改列結構。

當對話框出現時，單擊以在平等的列下啟用單行。這將在平板電腦和移動設備上的單列中將3列行更改為單一的列，同時保留台式機上的3列結構。

當您預覽所有斷點上的更改時，您將看到Divi如何轉變小屏幕的佈局。

通過自動化高度對齊，設計人員可以專注於創造力而不是技術修復，從而更容易在很短的時間內構建專業網站。 Divi 5的Flexbox佈局系統還通過模塊組支持更好的內容組織，使無自定義CSS的對齊模塊比以往任何時候都更加容易。

常見用例

Divi 5的Flexbox系統使創建相等的列高度通用性，並且在各種用例中有效。以下是Divi 5的Flexbox系統發光的一些常見方式：

1。產品清單

在電子商務佈局中，由於標題或描述，產品卡的內容長度通常會有所不同。使用Divi 5的Flexbox，您可以創建一個產品卡的網格，每列保持相等的高度，從而確保清潔和專業的外觀。例如，簡短描述的產品與具有更長描述的產品完美匹配。 Divi 5的Flexbox系統使您可以避免尷尬的空白，並創建具有促進用戶信任和參與度的凝聚力體驗。

2。特色部分

服務或功能部分非常適合Divi的Flexbox系統。 Divi 5中的Flexbox確保一排中的所有模塊具有相等的列高度，從而產生平衡和拋光的外觀。無論是展示BIOS，服務還是功能突出顯示，均衡的列都可以使您的網頁易於掃描，從而改善用戶體驗。

3。投資組合網格

投資組合網格是Flexbox的理想用例，尤其是用於展示其作品的自由職業者。 Flexbox確保畫廊項目（例如圖像均勻對齊，即使具有不同的縱橫比。您可以使用組模塊，為其分配背景圖像，並相應地調整間距。這創建了一個整潔，專業的網格，可以始終如一地展示您的作品，使其非常適合攝影師，設計師或旨在打動潛在客戶的機構。

下載文件

免費下載

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

下載

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

立即熟悉Divi 5的Flexbox功能

Divi 5的Flexbox佈局系統標誌著Divi 4均衡列高度的方式的重大飛躍，從而改變了Divi用戶如何創建相等的列。如果Divi 4依賴於一種僵化的背景依賴方法，該方法通常需要定制的CSS進行改進，則Divi 5利用Flexbox來提供直觀的控制和無縫的響應能力。結果是一個更有效的系統，它消除了對自定義CSS解決方法的需求，並允許Divi用戶輕鬆構建精明的專業佈局。

您準備好提升Divi網站了嗎？潛入Divi 5的Flexbox設置，並嘗試他們解鎖的創意可能性。在下面分享您的評論，或在我們的社交媒體渠道上與我們聯繫，以分享您對我們新的Flexbox功能的想法。