Flexbox CSS屬性的初學者指南

良好的佈局始於一個清晰的對齊和間距的模型。 Flexbox通過沿單個軸組織內容來提供對方向，對齊，包裹和間隙的可預測控制來提供該模型。

這篇文章涵蓋了這些CSS屬性的基礎知識及其如何共同工作。基本原理後，我們使用Flexbox佈局系統在Divi 5中顯示瞭如何在視覺上實現相同的方法。讓我們開始！

什麼是CSS Flexbox？

移動流量超過台式機更改了網頁設計。開發人員需要在手機，平板電腦和台式機上使用的佈局。舊方法通常失敗。

Flexbox修復了此問題。 CSS Flexbox使元素適應。添加顯示：彎曲到一個容器，其直接孩子變得靈活。它們可以根據空間生長，收縮或保持固定。

Flexbox將項目放在直線上，即從左到右行或從頭到底部的列。您選擇方向。

容器控制佈局。您將項目對齊和空間的方式設置如何，例如均勻分佈，中心或堆疊。 GAP屬性在沒有額外邊距或填充的項目之間增加了一致的空間。較舊的技術需要棘手的保證金數學，並且經常破產。

傳統方法是隨機的間距選擇：這裡的10px，20px，其他地方40px。這些分散的值會導致不一致，並使很難知道適用哪個間距。 GAP屬性通過對所有元素使用一個一致的規則來刪除猜測。

彈性箱及其屬性的快速指南

Flexbox分為兩個營地：容器的屬性和物品的屬性。容器屬性會影響整個組，而項目屬性可讓您調整單個元素。大多數佈局只需要其中一些屬性，例如：

顯示：Flex

通過添加顯示：Flex。它的直接孩子成為彈性物品。默認情況下，項目排成一排，而不是像標準塊元素那樣堆疊。您的間距頭痛消失，因為Flex項目遵循的規則與常規元素不同。現在，容器控制其子女（或項目）的行為方式，您將獲得可預測的結果，而不是通常的CSS驚喜。

撓性方向

選擇哪個方向項目流動。使用一行進行從左到右的安排。

和一列垂直堆疊。

將兩個反向添加到一個，然後項目完全翻轉其訂單。

此選擇設置了您的中央軸，這會影響其他屬性的工作方式。

從行轉換為列的切換會改變合理性和對準項目的行為方式，因此您的計劃首先出現。

合理性

該屬性沿著您的中央軸分佈剩餘的空間。物品取他們所需的東西，然後該屬性處理其餘部分。使用Flex-Start在開始時堆疊所有內容，中間以將項目集中在中間，然後將所有內容延伸到最後。同時，使用相等差距分開的空間分開。空間值使每個項目在兩邊都相等，而空間卻在各處造成了相同的間隙。

對準項目

它處理橫軸上的對齊。對於水平佈局，這意味著垂直對齊。對於垂直佈局，它控制水平定位。它支持諸如Flex-Start，Center，Flex-End，strave和基線之類的值（不是空間*值）。將其設置為中心，而物品與中間保持一致，無論其高度如何。默認值是拉伸的：項目拉伸以填充容器的跨尺寸。如果容器的橫向大小是自動的，則通常等於最高的物品，因此物品的高度相等。

屈曲包

確定物品用盡房間時會發生什麼。 NowRap通過縮小項目將所有內容保持在一行上。切換到包裝紙和不適合新線條的物品，同時保持其首選尺寸。您也可以扭轉包裹方向。包裝將您的單行變成多行，創建類似於網格的佈局。

差距

它增加了項目之間的空間，而不會與邊距混亂。設置差距：20px，每個項目都會獲得一致的間距。如果需要，您可以設置不同的水平和垂直間隙。該空間僅出現在項目之間，而不是邊緣周圍。這會比以後更改佈局時打破的利潤率。

一旦您掌握了它們，這些屬性就可以很好地工作。棘手的部分是記住每個人的所作所為並輸入所有CSS。您編寫一些代碼，刷新瀏覽器，看到它不太正確，然後回去調整。像Divi這樣的視覺構建器通過讓您單擊按鈕而不是鍵入屬性名稱來將其翻轉。

Divi 5使Flexbox Visual

隨著我們的建立，學習Flexbox是一回事。記住Jusify-content：之間的空間是另一回事。您花費的時間多於設計屬性。您不用編寫CSS，而是使用按鈕和滑塊，這些按鈕和滑塊準確地顯示了每個選項在Divi Builder中的作用。 Divi 5將其帶入Flexbox，將抽象概念變成直接的，可單擊的控件。

在我們深入研究之前，讓我們簡要看一下Divi是什麼。

什麼是Divi？

Divi是一個網站構建器，使WordPress適合那些想要不麻煩的好看網站的人。

您可以在頁面上拖動任何200多個模塊，然後更改其位置的文本。選擇顏色並在您在真實網站上工作時立即觀看它們，而不是以後可能對您有些預覽。

該主題包括針對餐館，攝影師，顧問和其他業務的2000多個佈局，因此您可以找到自己喜歡的餐廳，並調整它，直到它完美地滿足您的需求為止。

主題構建器使您可以控製網站的每個部分。您可以設計出脫穎而出的標題，而不是看起來像其他所有人的標題，構建人們想要閱讀的博客頁面，甚至使您的404頁變得足夠有趣，以至於訪問者堅持下去而不是離開。

Divi AI可以幫助您快速構建

有一次，製作主題和模板意味著將不同的應用程序雜交以供複製，圖像和設計思想。 Divi AI將您需要的所有內容聚集到一個統一的界面中：就在構建網站的位置。

告訴它，您需要文字，然後寫它。

詢問自定義圖像，並創建它們。您甚至可以描述照片編輯並觀看進行更改。

另外，它會在您詢問時處理代碼並構建新部分。

Divi快速站點可以使您免於盯著空白頁面，而不知道從哪裡開始。您可以從我們的團隊設計的初學者站點中挑選，其原始圖像和藝術品看起來不錯。

您還可以將您的業務描述為Divi快速站點，並讓它使用AI從頭開始構建一些東西。這些AI構建的站點帶有真正的標題，複製和與您的描述相匹配的圖像。

用AI生成所有內容，從Unsplash中獲取照片，或丟下圖像的佔位符。首先設置您的字體和顏色，然後讓AI圍繞您的品牌選擇工作，同時隨後將所有內容都可以編輯。

Divi 5：未來的網站構建器

Divi 5從頭開始重建整個框架。

Visual Builder運行更順暢，頁面更快，代碼庫可以更有效地支持現代的Web標準。您將獲得更清潔的標記，更好的性能，並為現在和未來做好準備。

該界面也會簡化。設置在邏輯上看起來更有條理，日常任務需要更少的點擊。無論您是構建簡單的頁面還是複雜的佈局，總體體驗都會更快地響應。

您會得到相同的視覺構建方法，只有下面的基礎要強得多。

Divi 5中的新功能

新的架構為以前無法​​使用的功能打開了門。這些18歲以上的添加改變了您的構建和管理網站的方式。

這是您得到的示例：

• Flexbox佈局系統：用於對齊，間距和定位的視覺控制。元素可以自動生長，收縮或包裹到新線條。與嵌套行和模塊組一起工作，用於沒有代碼的複雜佈局。
• 嵌套行：將行放入其他無限嵌套的行中。在沒有代碼解決方案的情況下構建複雜的佈局結構。
• 17 WooCommerce模塊：完整的產品頁面建設者，包括產品庫，添加到購物車，評論，評分，股票通知，麵包屑，產品元，Upsells等。購物車和結帳模塊即將到來。
• 交互系統：創建彈出窗口，切換，滾動動畫，鼠標移動效果和視口觸發器。混合多個觸發器，以進行複雜的行為，例如滾動後淡出的促銷橫幅。
• 響應式編輯器：讓您同時查看，編輯和重置響應式懸停和粘性狀態，而無需切換視圖模式以更快，更精確且更雜亂的編輯。 >>>>
• 循環構建器：構建從數據庫中提取的動態內容。創建自定義的帖子佈局，產品網格和重複部分。使用WooCommerce產品。
• 選項組預設：創建用於排版，邊界，陰影和背景的可重複使用樣式。將它們應用於任何兼容元素，而不僅僅是單個模塊。
• 設計變量：設置顏色，字體，間距，數字，圖像和文本的全局值。一次更改您的主顏色，它將自動更新。
• 高級CSS單元：使用clamp（），calc（），min（）和max（）通過視覺控制功能。無需響應的版式和間距計算所需的代碼。
• 相對顏色和HSL：創建數學上美麗的顏色系統。構建顏色變化，當更改基本顏色時，它們會自動保持和諧。

還有更多！我們的開發團隊繼續添加功能〜每兩週準備公開Beta版本。

Divi 5的Flexbox設置的快速概述

Divi 5的視覺方法從Flexbox實現中刪除了猜測。您沒有記住屬性名稱和鍵入CSS，而是獲得按鈕和滑塊，這些按鈕和滑塊可以準確顯示每個控件的作用。看看它有多容易。

1。設置您的第一個彈性行

首先從擴展的模板選擇中選擇您的行結構。 Divi 5提供了更多的佈局選項，包括相等的列，多排網格和多列設置。

Divi 5中的新部分自動從Flexbox開始。當您添加新鮮的行時，它可以隨時打開Flex屬性。但是，如果您正在使用舊Divi版本的現有部分，則需要通過單擊行上的“設置圖標”，導航到“設計”選項卡>佈局，然後將“塊”更改為“ flex”，從而從默認的塊佈局手動切換來flex。

2。了解方向，流動，對齊

您的佈局方向字段確定項目最終的位置。行是默認設置，該設置使項目水平排列。

切換到列，項目垂直堆疊，就像常規的Web佈局一樣。

這兩個選項都帶有反向版本，可以完全翻轉訂單。

同時，合理的內容可以決定沿著主軸剩餘的空間發生了什麼。對於行，啟動時間左，中間中心水平中心，結束右側對齊。

對於列，啟動意味著頂部，中間，​​將所有內容都推到底部。

除了標準啟動，中心和結束對齊之外，您還可以在相同間隙的差距之間擁有空間，非常適合導航菜單或卡片佈局。

周圍的空間使每個物品在兩側都相等，這在您想要一致的邊距時很有用。而且，空間均勻地在各處造成相同的間隙，非常適合平衡視覺間距。

對齊項目垂直於您的流動方向。如果選擇行佈局，則控制項目的垂直定位。

如果選擇了列佈局，則可以處理水平對齊。

該中心將所有內容保持在中間，開始位置在開始邊緣，末端將它們推到遠端，並且延伸使項目填充了可用的空間。

這些控件可以解決常見的佈局頭痛，而無需自定義CSS計算。

3。用差距控件將事物伸出

GAP控件在容器中的Flex項目之間增加了空間：列，模塊和任何內容類型的工作。縫隙創造了呼吸空間，而沒有混亂的填充或保證金數學。差距僅出現在項目之間，而不在外邊緣周圍。

將您的水平縫隙設置為20px，每個列都具有確切的間距。

將垂直差距更改為20px，所有差距將立即更新。

Divi 5支持高級CSS單元，例如視口長度和百分比。您可以使用clamp（）來響應較大的間隙，以在屏幕尺寸之間進行擴展。還支持CALC（2REM + 10PX）等單元的Calc（）函數。

差距控件在這裡還支持設計變量。添加一個數字變量，稱為“水平列間隙”，用夾具（16px，2vw，32px）作為值。將該變量應用於整個網站的差距控件。

當您需要更緊密的間距時，請編輯變量；每個差距都會立即更新。

4。控制物品如何包裝

佈局包裝控制項目用盡水平空間​​時會發生什麼。默認的沒有包裝設置可以通過縮小物品適合容器來使所有內容都保持在一行上。切換到包裝紙和不適合新線條的物品，同時保持其自然尺寸。

包裹反向的操作與常規包裹相同，但會傾斜方向。新線條出現在前面的線之上，而不是下面。

當項目溢出時，這使您可以控制視覺層次結構。包裝行為在不同的屏幕尺寸上保持一致，因此您的佈局從桌面到移動設備可以預測地適應而不會破裂。

Divi 5還為您提供包裝對齊控件。當您啟用Flex包裝和多線表單時，此功能會自動出現。將方向設置為行時，包裝對齊方式可用於垂直對齊。

同樣，對於列方向，選項用於水平對齊。

拉伸使所有線路都會擴展以填充可用的垂直空間。在開始時啟動一束線，中間簇在中間，然後將它們推向相反的邊緣。

在差距相等的空間之間，散佈線之間的空間，周圍的空間使每條兩側的呼吸空間都相等，並且空間在所有線之間均勻地產生相同的間隙。

這非常適合卡片佈局，圖像畫廊或任何需要自然流向多行的內容。物品根據可用寬度重新安排時保持其比例和間距。您可以在小屏幕上擠在一起而不會融合在一起。

5。在不同的屏幕尺寸上工作

Divi 5的七個斷點為您提供了對佈局如何適應的粒狀控制。

每個斷點都可以獨立工作，因此您可以將佈局方向切換到移動台上的列，而桌面行佈局則保持不變。您可以將所有內容集中在手機上，但要將該空間保持在較大屏幕上的對齊之間。

您的桌面三列設置可以成為移動設備上的單列堆棧，而不會影響中間斷點。每個屏幕尺寸都可以最適合觀看體驗。

新的響應式編輯器使此過程更加順暢。單擊任何設置旁邊的響應式編輯圖標，以一次查看和修改所有屏幕尺寸的值。

但是，如果您使用clamp（）值來隔離行和列，則可以在不需要手動更改的情況下自動擴展在斷點之間。

6。創建選項組預設

在按照所需的方式使用FlexBox佈局後，您可以通過單擊選項組預設選項並恰當地將這些設置保存為選項組預設。

您的差距值，對齊方式和包裝設置被捆綁在一起。單擊“保存”時，確切的佈局配置將在您的網站上重複使用。當您要使用保存的預設時，請單擊新行上的預設圖標，然後選擇剛保存的預設。

預設使您的高級單位完好無損。您設置的所有數學以及更改甚至是在不同的斷點上進行的，您的響應速度距離轉移。

立即開始使用Divi 5的Flexbox

Flexbox消除了更改佈局時斷斷續續的邊距和填充數學。您停止使用媒體查詢和自定義部分的響應式設計。

Divi 5將這些抽象的CSS屬性變成視覺控制。您可以單擊按鈕以設置方向，拖動滑塊以調節間隙，然後切換包裹。響應式編輯器可以從一個面板中處理所有七個斷點，因此您可以立即看到結果而不是對代碼進行猜測。

保存成功的組合作為預設，並在任何地方重複使用。您花時間設計而不是調試CSS語法。