什麼是flexbox（為什麼要使用它）

您可以整天構建乾淨的部分，但是每個屏幕尺寸的元素比對齊元素開始感覺更像是試驗和錯誤，而不是故意的設計。

Flexbox修復了這一點。它使您可以真正控制元素如何坐，拉伸，收縮和包裹容器內部，而不會不斷調整邊距和填充物。在本指南中，我們將分解Flexbox的工作原理，簡化佈局的方式以及如何在Divi 5中視覺使用而無需編寫一行代碼。

什麼是flexbox

Flexbox（用於靈活盒佈局的縮寫）是一個佈局模型，可簡化元素如何在容器中對齊和空間空間。 Flexbox不用使用邊距或固定寬度手動定位每個項目，而是讓您定義這些元素應取決於可用空間的行為。

元素應該增長以填補額外的空間嗎？縮小空間時收縮？當他們不再適合時，他們應該將其包裹在下一行嗎？您可以通過應用於容器及其孩子的一組屬性做出這些選擇。這就是您決定佈局應如何響應的方式。

讓我們以實用的例子來理解這一點。假設您在水平行內有三個按鈕。使用Flexbox，您可以將它們均勻地集中在容器中：

確定中間按鈕應比其他按鈕更多的空間：

或者，當屏幕變窄時，您可能希望按鈕自動堆疊：

Flexbox通過簡單的屬性，例如合理性，flex-wrap和Flex Groow，使所有這些都成為可能。

此外，它使您可以控制項目的間隔，在不同的軸上對齊並在視覺上排序，而無需更改其在構建器中的實際位置。您可以將內容中心，將其推到容器的頂部或底部，與其他項目對齊，甚至在斷點上扭轉整個訂單。

您可能會想：我不能用邊距和填充做到這一點嗎？

你說得對。您可以手動中心元素或使用自定義寬度調整大小。但是，這些方法依賴於單獨定位每個項目。每個屏幕尺寸一次調整每個元素。

Flexbox完全改變了該過程。它不用分別處理每個元素，而是讓您在容器級別定義佈局規則。您告訴容器在不同的情況下其孩子應表現如何，並根據需要調整他們。

這種方法使佈局更加一致，更易於管理，並且隨著設計的發展而更加靈活，尤其是當屏幕尺寸更改或添加新模塊時。

撓曲方向如何影響對齊

您在Flexbox中做出的第一個選擇之一是元素應在行或列中流動的方向。彈性方向屬性設置了這一點，並定義了項目如何在容器中對齊，包裝和空間。

讓我們更好地理解這一點，因為諸如合理性和對齊的常見屬性完全取決於設置哪個方向。它們不能在瀏覽器的默認佈局上工作，而是由Flexbox創建的軸：主軸和橫軸。主軸遵循您設置的方向，該方向是flex方向：行的水平，垂直方向。橫軸採用另一種方式：行的垂直行，水平的列。

因此，當將方向設置為行時，主軸將從向右運行。這意味著合理的內容會在整個行上移動元素，並且對齊項目控制它們如何在該行中垂直對齊。

當您將方向切換到列時，整個對齊邏輯翻轉。現在，主軸運行到底部，這意味著垂直對準項目的合理性對齊，並且對齊項目從左到右調整其位置。

一開始它可能會感到有些混亂，但是一旦您看到主軸和橫軸如何響應方向，就可以單擊。您將開始發現模式，而佈局決策會更加直觀。如果您想在練習時仔細檢查事物，也有一個快速的參考表。

語法和公共Flexbox屬性

將容器的顯示屬性從塊切換到Flex，以激活Flexbox。當您執行此操作時，瀏覽器會開始將內部元素（例如行，按鈕，卡片或圖標）視為Flex項目。

.container {
display: flex;
}

從那裡，您使用不同的Flexbox屬性來控制行為。例如，正當內容是確定項目如何沿主軸間隔（默認情況下設置為水平，flex方向：行） 。使用Flex-Start將物品對齊向左對齊，彎曲端以向右推，將它們推入中心，或者介於空間和空間之間，以均勻地散佈它們。

默認情況下，FlexBox試圖將所有項目適合一行。如果有太多的話，它們會根據其彈性折射設置而收縮以適合，如果它們不能縮小足夠的縮小，則可能會溢出容器。為了防止這種情況，請打開Flex包裝，以便項目移至新線路上，而不是將其塞入一條線上。

您已經可以想到這兩個屬性可以解決佈局問題的許多用例。但是還有更多，每個都可以使您對大小，順序，對齊和間距的特定控制。

如果您想知道這些實際上是如何以一種有趣的動手方式工作的，請嘗試Flexbox Froggy。這是一個有趣的小遊戲，您可以在其中應用真正的Flexbox代碼將青蛙在池塘周圍移動。一路上，您停止猜測並開始確切地認識到每個屬性的作用。

為什麼使用Flexbox

到目前為止，您已經看到了Flexbox如何改變佈局如何響應空間。但是，真正的價值來自於這種轉變使您更容易做到的事情。 Flexbox將頑固的佈局挑戰變成了簡單的可重複使用的模式。

• 簡化的對齊方式：諸如合理性和對準項目中心或空間項目之類的屬性，而無需依賴邊距調整或輔助類別。
• 默認情況下響應能力：項目自然會根據其空間而生長，收縮或包裝。這會導致在不增加斷點的情況下適應的清潔佈局。
• 自動間距和尺寸：您可以控制元素如何與Flex Grow，Flex-Shrink和Flex-Basis等屬性共享空間，從而使佈局流體而不是固定。
• 重新排序而無需更改HTML：您可以在不觸摸HTML的情況下更改元素的視覺順序。該結構保持乾淨，而佈局為不同的屏幕調整。
• 更少的佈局黑客：您不再需要浮點，clearfix或高度匹配腳本。 Flexbox用現代，可靠的選項取代了這些東西。

而且，由於它在所有主要瀏覽器中都得到了支持，因此FlexBox不僅有效，而且可靠。這使其成為現代項目的現代，更可靠的選擇。

為什麼Flexbox通常比網格更好

網格是另一個流行的佈局系統，例如FlexBox。但是，兩者都是用於不同用例的。

例如，網格設計用於二維佈局，您需要對行和列進行控制。產品展示箱，圖像畫廊和雜誌式編輯佈局是網格示例，因為它們依賴於兩個軸上緊密排列的結構。

您首先定義網格：有多少行和列，每個行應該有多大或高。然後，將每個項目放入該結構中。

這是一個網格佈局。項目在兩個軸上都對齊：行和列，具有固定的間距和比例。

但是，並非每個佈局都需要該級別的計劃。

在大多數情況下，UI截面沿單個方向流動。卡行，圖標加上文本塊和導航鏈接的行遵循一個軸，而不是兩個。這正是Flexbox所在的位置。

在Flexbox佈局中，卡片在一個方向（行或列）上對齊，然後根據容器規則包裝和間隔。

您無需提前繪製整個佈局。您只需告訴容器，項目應該如何沿單個軸行為，然後flexbox對其進行處理。

因此，除非您正在設計真正取決於剛性網格的東西，否則Flexbox通常將是更快，更簡單，更靈活的選擇。

Divi 5中的Flexbox

到目前為止，關於Flexbox的所有知識都很棒，但是為每次佈局調整編寫自定義CSS並不是您想做的，尤其是如果您使用視覺構建器（例如Divi）構建了網站。

這就是為什麼Divi 5現在包含內置Flexbox控件的原因。您不再需要切換選項卡或手動添加CSS。所有這些，甚至是高級佈局行為，現在都內置在視覺構建器中，減去編碼和壓倒性的後端。

訂閱我們的YouTube頻道

長話短說，不需要記住語法或屬性名稱，只需從接口中選擇您想要的內容即可。單擊任何部分，行或列，前往“設計”選項卡，然後在佈局>佈局樣式下，請確保使用Flex。

這打開了一組新的佈局控件。這些是您通常在CSS中寫入的核心Flexbox屬性，但現在是可單擊的選項。您可以實時測試更改，並查看內容的反應。

因此，即使您從未寫過一行flexbox代碼，也不會錯過任何東西。 Divi 5在相同的控制級別上為您提供相同的佈局控件，但更輕鬆。

了解有關Divi 5的Flexbox系統的所有信息

新的行結構

為什麼當其他網絡構建者還擁有它時，為什麼Divi？儘管許多Web構建者將Flexbox作為佈局選項，但Divi 5對其進行了不同的方式。這不是現有系統之上的分層的功能；現在，這是構建器工作方式的核心。

整個佈局發動機都在其基礎上以Flexbox的形式從頭開始重建。結果，佈局行為感覺更加一致和可預測，因為它遵循故意設計的佈局邏輯。

例如，當您在Divi 5中添加新部分或行時，您會立即註意到一些不同的東西。新結構。現在每個人默認情況下在FlexBox上運行，這意味著從一開始就更明智地處理對齊，間距和響應性。

您無需為添加的新設計元素打開Flex。當您這樣做時，在編輯較舊的佈局時，對齊和間距工具就會立即易於管理。

您還可以使用更改列結構更改如何在行內排列的列。

這打開了一個面板，您可以在其中選擇一個新的列結構。佈局立即更新，Flexbox會自動調整間距和對齊方式。

嘗試添加一些不同的行類型並調整屏幕大小。您將看到一切都在不崩潰的情況下改變和適應。這就是彈性箱烘烤到構建器中的優勢，使Divi 5成為更可靠和現代的選擇。

flexbox在Divi 5中的工作方式

如果您開始使用，這是一項快速的演練，可以幫助您在Divi 5中使用FlexBox時感到自信。

佈局控件

當您將部分，行或列切換到Flex佈局時，設計>佈局設置中會出現一組新的佈局控件。這些為您提供了視覺Flexbox控件，並帶有通常的選項。

• （1）佈局樣式：這是您激活Flex的地方。設置後，其他特定於方向，對齊和間距等其他特定的選項將變得可見。
• （2）水平差距：從左到右增加項目之間的空間。
• （3）垂直間隙：使用列佈局時，在堆疊元素之間設置空間。
• （4）佈局方向：更改流，行，列或反向方向，因此項目可以並排對齊或從上到下對齊。
• （5）證明內容是合理的：沿主軸對齊。您可以將它們居中，將它們推到一側或將其散佈。
• （6）對齊項目：對齊沿橫軸的項目，在垂直排列在水平行中時，這很有幫助。
• （7）佈局包裝：這使得在空間用完時可以將項目移至下一行。在構建響應屏幕尺寸而不是斷裂的佈局時有所幫助。

假設您有一個帶有徽標的品牌欄，希望它們更大。將彈性方向設置為行並打開佈局包裝，當沒有空間時，它們會自動流入兩個行。

現在，如果沒有媒體查詢或手動解決方法，將兩行的元素排列在一起很容易。

列控件和尺寸

進入彈性可啟用行之後，每列在設計>大小的列列中都有一個新設置。這決定了一列根據其內容和周圍環境佔用的空間。

您可以在收縮之間進行選擇以適合（這只會使列僅與其內容一樣寬）或生長以填充（這延伸了列以佔用額外的空間）。

例如，如果您想讓文本列更加突出並具有擁抱其內容的卡元素，則將卡片設置為縮小以適合其，並將文本成長為填充。

訂單控件

另一個功能強大但經常被忽略的工具是“內容”選項卡下的順序設置。這使您可以在視覺上重新排序列和模塊，而無需更改線框或圖層視圖中的佈局結構。

假設您希望一個特定的模塊首先出現在移動設備上，但在台式機上第二。您可以在每個斷點處分配不同的訂單值。

Flexbox的實際用例

讓我們看一下現在使用Divi 5簡化的一些Flexbox用例。

1。垂直對齊任何東西與彈性

很長一段時間以來，垂直對齊是Web Design最令人討厭的佈局問題之一。您會嘗試使用填充技巧，絕對定位，手動邊距，以及最終在台式機上看起來不錯但在較小的屏幕上打破的東西。

有了Divi 5，頭痛就消失了。現在，如果您想垂直將內容集中在部分中，則只需將對齊項目設置為中心即可。

就是這樣。佈局會自動調整跨斷點，您的內容始終保持在最佳位置。現在，使用CSS體操的方法現在只有幾下構建器內部的幾下。

2。自動均衡卡高度

您可能以前遇到了這個問題。您可以創建一排卡片，例如Blurb部分，並且一切看起來都不錯，直到一個項目的文本比其他文字更多。突然，您的佈局感覺不平坦。有些列伸展更高，其他列保持短缺，並且設計失去了平衡。

不再需要該手動清理。當您將行或部分切換為Flex時，Divi應用默認設置，將每列視為Flex項目。這會使它們自動伸展以匹配同一行中對方的高度，而不管內部的內容如何。

它也保持響應能力。在較小的屏幕上，列包裹成新的行而無需額外的調整，並且相等的高度行為繼續適用。

3。跨斷點自動截斷按鈕

保持一排按鈕整潔，可以在不同的屏幕尺寸上可讀，這可能很痛苦。通常，您最終會添加新行或手動調整每個斷點的佈局。但是對於Divi 5，這已不再需要。

打開Flex佈局，並在筆記本電腦視圖中啟用佈局包裝。就是這樣。這些按鈕將在較小的屏幕上自動包裹成多條線，而不會破壞佈局。

這些按鈕將其間距和對齊方式保持在較大的屏幕上，並自然地堆放在平板電腦和電話上。您甚至可以使用正當內容來微調他們的對齊方式，並使用縫隙進行控制間距，因此所有尺寸的一切看起來都很乾淨，有意。

Divi + Flexbox只是有意義的

您已經看到了Flexbox的工作原理，Divi 5如何使其視覺效果以及現在的常見佈局頭痛現在花費幾秒鐘而不是數小時。 Divi 5不僅支持Flexbox - 它是圍繞它構建的。沒有自定義CSS，每個部分，行和列都可以按照您的期望。

Flexbox不僅是使用Divi 5設計的選項。這是更聰明的默認值。清潔的佈局，更少的解決方法和響應式控制液直接烘烤到建築商中。這就是轉變，這是為您的Web Design的未來做準備的事情。