當然不乏CSS flexbox教程和類似內容在線向初學者推廣和教授flexbox。現在可以從許多不同的資源中學到布局技術。但是我希望這個面向初學者的CSS flexbox教程會有所不同。
在本CSS flexbox教程中，我旨在通過完全互動式的演示來教您Flexbox布局模塊的所有功能，這些演示實際上可以帶您了解Flexbox功能如何影響HTML頁面上的元素。
關於互動式演示
如前所述，此CSS flexbox教程中的所有演示都將是完全互動式的。每一個都會說明一個特定的flexbox功能，您幾乎可以在每個演示中單擊一個或多個按鈕來查看這些功能的效果。
另外，大多數演示都將包含一個「切換方向」按鈕，該按鈕將在ltr和rtl之間切換容器元素上的direction屬性。這將使您了解特定功能在兩種類型的環境中如何工作-使用從左到右的語言（例如英語和西班牙語）或從右到左的語言（例如阿拉伯語或希伯來語）。
如果您以前從未使用過此屬性，則這裡是一個演示，其中包含一些使用從右到左語言的示例文本：
請參見Pen上的一些示例，其中包括Louis Lazaris從右到左的文字。
有幾種方法可以完成HTML或CSS中的語言定義，但是在上面的示例中，我使用的是Direction：CSS中該段落元素的rtl。在flexbox演示中，我將不使用任何語言-僅使用具有虛擬內容的元素-但方向將能夠通過JavaScript進行切換。
創建flexbox容器
使用flexbox時要知道的第一個重要特徵是如何定義flex容器。在開始對齊，居中和對齊容器內的元素之前，首先必須指定父容器是flex容器：
.wp-block-code {
border：0;
填充：0;
}
.wp-block-code> div {
溢出：自動;
}
.hljs {
box-sizing：border-box;
}
.hljs.shcb-code-table {
display：table;
寬度：100％;
}
.hljs.shcb代碼表> .shcb-loc {
顏色：繼承；
顯示：錶行；
寬度：100％;
}
.hljs.shcb代碼表.shcb-loc> span {
display：table-cell;
}
.wp-block-code code.hljs：not（.shcb-wrap-lines）{
空白：前置；
}
.wp-block-code code.hljs.shcb-wrap-lines {
空白：預包裝；
}
.hljs.shcb-line-numbers {
border-spacing：0;
計數器重置：行；
}
.hljs.shcb-line-numbers> .shcb-loc {
counter-increment：line;
}
.hljs.shcb-line-numbers .shcb-loc> span {
padding-left：0.75em;
}
.hljs.shcb-line-numbers .shcb-loc :: before {
border-right：1px solid #ddd;
內容：櫃檯（行）；
顯示：表格單元格；
填充：0 0.75em;
文字對齊：右；
-webkit-user-select：無；
-moz-user-select：無；
-ms-user-select：無；
用戶選擇：無；
空白：nowrap;
寬度：1％;
}
.flex-container {
display：flex;
}
將其放置到位後，.container中的所有子元素都將成為flex項，因為它們現在存在於flex格式化上下文中。下面是一個互動式CodePen演示，通過該演示，您可以查看在display：flex和display：block之間切換容器時發生的情況。
請參閱CodePen上的Louis Lazaris撰寫的Pen Togging a flex container。
在此示例中，唯一應用的與flexbox相關的CSS是display：flex。為了清楚起見，您在彈性項目之間看到的空間很小。稍後，我將討論使用flexbox功能間隔flex項目的不同方法。
打開和關閉flex容器時，您會看到什麼？首先，必須注意所有元素（包括容器及其子元素）都是<div>元素。這意味著它們默認都是塊級元素。在此CSS flexbox教程中，我將主要處理塊級元素上的flexbox屬性的行為，因為這是最常見的用例。
默認情況下，塊元素放置在先前內容的下方，因此項目垂直堆疊。當啟用display：flex時，元素將水平對齊，同時仍保持其尺寸和指定的邊距。
了解彈性容器
如最初的演示所示，默認情況下，flex容器將水平顯示其flex子級。這就是flex容器的主軸。稍後，我將向您展示如何在flex容器中垂直顯示元素。在這種情況下，將在稱為交叉軸的位置上布置項目。
下圖顯示了這兩個軸：
如圖所示，橫軸垂直於主軸線流動。需要特別注意的是，儘管非flex塊在視覺上與橫軸的方向相同，但從技術上講，直到容器設置為顯示時，柔性塊才成為橫軸。
容器的Flexbox屬性
在本CSS flexbox教程中，首先，我將討論可應用於flex容器的不同屬性。稍後，我將向您展示如何定位彈性項目。
通過以這種方式劃分此CSS flexbox教程，您可以輕鬆地引用不同的功能，具體取決於您是想通過flex容器將所有項作為一個整體對所有項進行更通用的處理，還是要針對flex項目本身。
確定flex容器的方向：flex-direction
如所討論的，柔性容器可以具有垂直（在橫軸上）或水平（沿主軸）流動的元件。要指定方向，可以使用flex-direction屬性，該屬性採用四個值之一，默認值為row。
.flex-container {
display：flex;
flex-direction：行；
}
這是flex-direction的每個值的細分：
- 行–在文檔當前的書寫模式下，元素沿主軸水平對齊。
- row-reverse –該值同樣在主軸上，但與當前寫入模式相反。
- 列–顧名思義，這會考慮到當前的書寫模式，使彈性項沿交叉軸（垂直）流動
- column-reverse –與列相同，但相反
您可以在以下互動式演示中查看所有值：
請參閱Pen確定Flex容器的方向：Louis Lazaris在CodePen上的flex-direction。
請注意，方框已編號，因此您可以輕鬆地看到*反向值的效果。
另請注意，在英語和許多其他語言中，書寫模式設置為從左到右，而在其他語言中則相反。這就是為什麼您會經常看到在較新的CSS規範中使用更多通用術語的原因，以及為什麼創建諸如邏輯屬性和值之類的規範的原因。邏輯屬性不假設頁面語言（與諸如text-align：left這樣的假設一樣），因此不使用「 left」和「 right」之類的術語，而是用「 start」和「 end」代替。
包裝項目：彈性包裝
flex-wrap屬性使您可以確定容器中的flex項目如何以及是否希望包裝到下一行。
.flex-container {
display：flex;
flex-wrap：nowrap;
}
值細分為：
- nowrap –不要將項目包裝到下一行
- 包裹–如果物品不能放在一行中，則將它們包裹起來
- wrap-reverse –包裹項目（如有必要），但相對於默認書寫方向反轉其順序
默認情況下，即使指定寬度來強制項目擴展到可用空間之外，項目也不會自動換行。下面是一個互動式演示，演示了三個不同的值。請注意，所有彈性項目的寬度均設置為15％。
請參閱Pen Wrapping flex項：Louis Lazaris在CodePen上的flex-wrap。
如您所見，即使將Flex容器設置為flex-wrap：nowrap，即使設置了寬度，這些項目也可以放在一行上。元素換行後，它們將在遵守指定寬度的同時分成多行。
沿任一軸對齊元素：justify-content
恰當命名的justify-content屬性接受五個可能值之一，其語法如下所示：
.flex-container {
display：flex;
證明內容：flex-start;
}
flex-start的值是初始值。使用下面的演示很容易看到每個值的效果，但這是每個值的快速摘要：
- flex-start –將flex項目打包到行的開頭
- flex-end –將flex項目打包到行尾
- 中心–將彈性物品包裝在中心
- 間隔–彈性項目均勻分布，在頁邊距或填充的開頭或結尾沒有空格
- 圍繞空間– Flex項目在每行的開頭和結尾以「一半大小」的空間均勻分布
以下是互動式演示，可幫助您直觀地了解每個示例的工作方式：
請參見沿主軸的「筆對齊」元素：Louis Lazaris在CodePen上的「 justify-content」。
當您有兩個或多個項目時，這些值將以相當可預測的方式運行，但是請注意單個flex項目的行為：
請參見筆沿主軸對齊單個元素：Louis Lazaris在CodePen上的對齊內容。
如您所見，間隔值的行為與lone元素上的flex-start相同。在這種情況下，space-around的值與中心的行為相同，但這是可以預見的。
相同的屬性還可以用於對齊跨軸flex容器中的項目，如以下演示所示：
請參見沿橫軸的「筆對齊」元素：Louis Lazaris在CodePen上的「 justify-content」。
在當前線的橫軸上對齊元素：align-items
align-items屬性有點棘手，因為它的名稱並不能真正表明它的作用。此屬性可幫助您垂直於主軸對齊每個單獨的彈性項目，而這些項目仍沿主軸對齊。
這可能有點令人困惑。為了更清楚地說明，假設我在一個Flex容器中沿主軸（即flex-direction：row）有五個flex項目。這些項目保留在行方向上時，我可以將它們分別在垂直方向上對齊。如果這仍然令人困惑，那麼這裡的一些代碼和互動式演示將大有幫助。
.flex-container {
display：flex;
flex-wrap：包裝;
align-items：拉伸；
}
為了查看align-items的效果，我將容器的flex-wrap屬性設置為wrap，該演示將包含足夠多的項目，使您可以更清楚地看到效果。以下是可能的值：
- Stretch –默認值；彈性物品被單獨拉伸以適應橫軸
- flex-start –將每個元素沿橫軸與線的「開始」邊緣對齊
- flex-end –沿交叉軸將每個元素與直線的「末端」邊緣對齊
- center –將每個彈性項目沿橫軸居中對齊
- 基線–將每個彈性項目的文本基線居中
這是演示：
請參閱橫軸上的「筆對齊」彈性項目：Louis Lazaris在CodePen上的align-items。
請注意，我不僅包括十個flex項目，而且其中一些具有不同的高度和線高，以演示不同值的行為。
如您所見，這些項目相對於當前伸縮線（默認行或水平線）垂直對齊。請注意，值拉伸不會在容器的整個高度上拉伸彈性項目，而只會在項目的彈性線或「行」上拉伸。
如果我刪除了多餘的彈性項目行，請注意以下演示中的行為：
請參見「筆在橫軸上對齊單行的伸縮項目：路易斯（Louis Lazaris）在CODEPEN上對齊項目」。
同樣，高度和線條高度的變化也有助於將概念推向高潮。這是您必須嘗試使用的一種，以了解其用途。
處理彎曲線之間的多餘空間：對齊內容
align-content屬性是另一個一開始很難理解的屬性。但是，當您使用與兩端對齊內容相同的方式進行思考時，相對容易理解，除了處理項目及其沿主軸的空間外，此屬性處理的是柔性線之間的空間。
.flex-container {
display：flex;
flex-wrap：包裝;
align-content：拉伸；
}
這些值與justify-content相同，只是增加了Stretch（默認值）：
- 拉伸–拉伸伸縮線以佔據可用空間，使所有伸縮線具有相同的高度
- flex-start –將行打包到容器的開頭（通常是頂部）
- flex-end –將行包裝到容器的末端（通常是底部）
- 中心–線被填充到中心，頂部和底部等距
- 間距–線均勻分布，線之間的距離相等，頂部或底部沒有空間
- 圍繞空間–線以相等的空間均勻分布，但頂部和底部的剩餘空間為一半
規範指出以下內容：
只有多行伸縮容器在橫軸上才會有用於對齊線的自由空間，因為在單行伸縮容器中，唯一的線會自動拉伸以填充空間。
考慮到這一點，互動式演示包括多個伸縮線：
請參見彎曲線之間的Pen Handling額外空間：Louis Lazaris在CodePen上的align-content。
再次，我包含了不同大小的項目，以演示異常情況下的行為。
Flex項目的Flexbox屬性
到目前為止，此互動式CSS flexbox教程已經涵蓋了您可以應用於容器的所有屬性。將這些屬性放置到位後，您可以將許多屬性應用於一個或多個彈性項目（即彈性容器的子元素）。
讓我們通過考慮彈性項目屬性來繼續CSS flexbox教程。
指定彈性項目的順序：order
默認情況下，彈性項目根據它們在HTML源代碼中出現的順序進行布局。訂單屬性可以應用於任何彈性項目，以調整該項目在源訂單中的位置。
.flex-item {
順序：3;
}
order屬性接受一個整數，該整數表示彈性項目相對於其同級彈性項目的出現順序，同時考慮到存在的任何其他訂單值。
這是一個簡單的演示，其中包含三個flex項目。頂部的選項可讓您更改其順序。
請參閱「更改彈性項目順序的筆：Louis Lazaris在CodePen上的順序」。
在該示例中，三個彈性項目的更改順序類似於您調整三列布局的方式，與源順序相反（您可以出於搜索引擎優化的目的而執行此操作）。
使用訂單時了解優先順序
為了更好地理解order屬性，請注意以下互動式演示。剛開始時可能會造成混淆，尤其是如果您不了解在某些情況下如何確定順序。
請參閱Pen了解複雜的排序：Louis Lazaris在CodePen上的排序。
要了解您所看到的內容，請按以下步驟進行操作：
- 每個編號的彈性商品的訂單值均設置為其可見數
- 當您選擇數字選項之一時，另一種具有不同顏色的彈性項目會更改其順序
考慮到這一點，請注意一些奇怪的行為：
- 儘管您將5號彈性商品的訂單值設為1，但它會顯示為第二項商品（選擇2、3或4時也是如此）。
- 選擇5將其返回到起始位置，但是選擇6將其保留在5位置
- 選擇7將其置於第6位，選擇8將其置於第7位
這些行為的解釋如下：
- 所有項目均以現有訂單值開頭。如果兩個彈性項目共享相同的順序，則HTML源順序中的第一個優先
- 因此，項目＃1至＃4在更改後與＃5項目具有相同的順序時，它們的順序都優先。
- 同樣，由於＃5出現在原始來源中的＃6到＃12項之前，因此當其中任何一個共享相同的訂單值時，＃5優先。
同樣，要記住的主要概念是，共享相同順序的元素的行為就像沒有設置彼此的順序一樣。
確定彈性物料的相對大小：彈性增長
flex-grow屬性接受一個數值（可能是分數），該數值告訴瀏覽器一個flex項相對於flex容器中其餘的flex項將增長多少。它指定將剩餘空間中的多少分配給項目的大小。
.flex-item {
flex-basis：auto;
flex-grow：0;
flex-shrink：1;
}
如果將伸縮方向設置為行，則將增長因子應用於伸縮項目的寬度。如果將其設置為column，則將增長因子應用於彈性項目的高度。
在上面的代碼中，我還包括flex-basis和flex-shrink（稍後討論）。這些屬性設計為可協同工作，因此建議將所有三個屬性都包括在內，或使用速記形式（請參閱稍後的flexbox速記屬性）。
這是一個演示，允許您在單個flex項目上增加flex-grow屬性，因此您可以看到其行為：
請參閱Pen定義flex項的相對增長：Louis Lazaris在CodePen上的flex-grow。
注意flex容器有三個flex項。這三個屬性的flex-grow屬性都設置為0（默認值）。通過頁面上的數字輸入，您可以增加中間flex項目的flex-grow值，將其設置為0到1之間的十進位值。
在此示例中，任何大於1的數字都與1相同。其他flex項目沒有flex-grow值，因此它們的flex-grow為默認值0。因此，對於大於0的任何值第二個彈性項目將導致該項目佔用剩餘空間的該百分比。
但是，如果其他項目的flex-grow值設置為1，則您想要更大的任何項目都必須具有大於1的值才能看到大小上的差異。為了說明這一點，這是另一個演示，這次＃1和＃3項以flex-grow：1開頭，中間的項以flex-grow：0開頭：
請參閱Pen定義flex項的相對增長：Louis Lazaris在CodePen上的flex-grow。
如您所見，任何一個flex項目的flex-grow值都相對於其他項目的flex-grow值，其餘空間是根據flex-grow值的差異分配的。
確定彈性物料的相對尺寸：彈性收縮
flex-shrink屬性可能是flexbox屬性，您將在本CSS flexbox教程中使用最少的屬性。它的工作方式與flex-grow的工作方式相反。在示例中，我將從以下三個彈性項目的以下代碼開始：
.flex-item {
flex-basis：500px;
flex-grow：1;
flex-shrink：0;
}
在互動式演示中，我將所有彈性項目的flex-shrink值設置為1，然後將中間項目更改為flex-shrink：0，然後可以使用輸入的數字（以0.05為增量）進行調整：
請參見Pen定義flex項目的相對收縮：Louis Lazaris在CodePen上的flex-shrink。
在實際示例中，您可能會使用整數作為收縮因子，但這僅表明分數是可能的。如您所見，隨著flex-shrink值相對於其他項目的flex-shrink增大，目標項目的尺寸變小，這與flex-grow的工作方式差不多。
為了闡明其工作原理：
- 所有項目均設置為500px的flex-basis
- 其中兩個項目的flex-shrink值為1，這使其收縮
- 中間的項目以flex-shrink值為0開頭，這意味著它不會以
- 當您逐漸增加中間項目的收縮值時，它會相應地收縮
- 其他項目隨著中間項目的收縮而變大，因為收縮和增長因子總是根據可用空間以及相對於其他項目的收縮或增長因子來計算的
如前所述，這三個屬性旨在一起工作，因此您應該養成包括所有三個屬性的習慣，否則請使用速記形式。
設置彈性項目的初始大小：flex-basis
flex-basis屬性使您可以在根據常見的flexbox計算（如已討論的計算）分配可用空間之前，定義特定彈性項目的大小。
語法類似於CSS中的width和height：
.flex-item {
flex-basis：auto;
flex-grow：0;
flex-shrink：1;
}
flex-basis屬性可以接受以下值之一：
- auto –初始值，類似於可以將寬度和高度值設置為auto的方式
- content –此關鍵字與auto相似，但是它根據項目包含的內容來計算項目的大小
- length –任何長度值（px，em等）
- 百分比–任何百分比值
在撰寫本文時，內容值是一項僅在Firefox中受支持的新功能，因此下面的演示不包含內容作為選項。
請參閱「筆」來定義伸縮項目的基礎：Louis Lazaris在CodePen上使用flex-basis。
嘗試更改數字輸入的值。請注意，第一個彈性項目的大小如何隨著其彈性基礎變大而變化。這樣，您可以在分配剩餘的可用空間之前調整特定元素的大小。
並請注意，當使用flex-basis，flex-grow和flex-shrink這三個屬性中的任何一個時，它們的效果將取決於flex容器是行模式還是列模式。請注意下一個演示此代碼的CodePen，容器現已設置為flex-direction：列：
請參閱「筆」定義使用列方向進行生長的基礎：Louis Lazaris在CodePen上的flex-basis。
如您所見，flex-basis的值不僅與width相關，而且會影響彈性項目，具體取決於容器的彈性方向。
自我調整彈性項目：自我調整
之前，我向您展示了如何使用flex容器上的align-items屬性來確定flex項目在交叉軸上的對齊方式，同時使項目在主軸上保持對齊。
align-self屬性使您可以定義相同類型的對齊方式，但可以縮小到特定的彈性項目。回想一下align-items用於flex容器；align-self應用於一個或多個彈性項目。
.flex-item {
align-self：flex-start;
}
align-self屬性接受的值與align-items屬性相同，唯一的區別是align-self也接受關鍵字auto。自動值只是意味著flex項將基於容器上align-items的值確定任何對齊方式。
我將使用與之前用於對齊項目的演示相同的演示，除了這次選擇的值將僅應用於十個元素中的單個元素（＃5項）。
請參見「筆在橫軸上對齊單個伸縮項目」：Louis Lazaris在CodePen上的「自行對齊」。
要查看將相同的值應用於不同的元素，請將HTML中的.extra類移動到其他元素（更改將應用於具有.extra類的第一個元素，因此應該只有一個）。
Flexbox速記屬性
到目前為止，我已經介紹了所有的flexbox常規屬性，但是您應該知道，某些屬性可以使用簡寫形式表示。在本部分中，我將不提供任何進一步的演示，只是速記的細分。
Flex簡寫
flex速記應用於一個或多個flex項目，代表三個屬性：
.flex-item {
flex：<flex-grow> <flex-shrink> <flex-basis>;
}
您還可以單獨提供none的關鍵字值來重置項目上任何現有的flex值。flex-grow或flex-basis之一必須存在，flex-shrink是可選的，並且必須遵循flex-grow。
以我先前為那些單獨的長期屬性介紹的內容為例，可能像這樣：
.flex-item {
flex：0 1 300px;
}
該單個聲明將flex-grow屬性設置為0，flex-shrink屬性設置為1，flex-basis屬性設置為300px。
我還應該指出，該規範鼓勵使用flex速記和單個速記屬性。它說：
鼓勵作者使用flex速記來控制靈活性，而不是直接使用其速記屬性來控制靈活性，因為速記會正確地重置任何未指定的組件以適應常見用途。
靈活流程速記
您可以選擇使用的另一個簡寫屬性是flex-flow，它適用於flex容器。該屬性表示：
.flex-container {
flex-flow：<flex-direction> <flex-wrap>;
}
您只需要包含其中一個值。由於每個屬性的可能值不重疊，因此您可以單獨包含任一屬性的值。以下示例將flex-direction設置為column，並將flex-wrap設置為wrap-reverse：
.flex-container {
flex-flow：列換行；
}
一些實際的CSS flexbox片段
Flexbox使使用CSS做一個粘貼式頁腳變得容易，這是一種常見的模式，其中頁腳停留在視口的底部，直到內容將其壓下為止。
請參閱CodePen上的Louis Lazaris撰寫的帶有CSS flexbox的Pen Sticky頁腳。
使用按鈕添加或刪除段落內容。以前只有通過各種黑客手段和變通辦法才能做到這一點。
Flexbox還可以輕鬆地將任何元素垂直放置在任何容器內的中心位置，而不管元素或其容器的大小如何，這在過去幾乎是不可能的。
請參閱CodePen上的Louis Lazaris的flexbox與筆垂直居中。
在上面的演示中，嘗試調整容器或容器中的flex項目的大小。無論大小如何，該項目都將保持水平和垂直居中。這隻需在容器上使用三行flexbox CSS即可完成：
.flex-container {
display：flex;
align-items：居中;
證明內容：中心；
}
最後，這是一個響應式CSS卡布局，其中每個卡都是一個媒體對象。沒有浮動，沒有顯示：內聯代碼塊或其他模擬網格的變通方法。
如果訪問該CodePen，則可以交互地添加或刪除卡組件，以查看布局的行為。使用CSS flexbox，這很容易，而且沒有布局副作用，就像我們在使用浮點數或其他方法時曾經遇到的那樣。
結束本CSS flexbox教程
我希望如果Flexbox對您來說是一個新概念，此互動式CSS flexbox教程已為您提供了很多實驗的機會。如果願意，可以將CSS模板用作遊樂場。如果您已經熟悉flexbox，現在可能更清楚了各種功能的一些細節。
最後，如果您想弄亂本CSS flexbox教程中的示例，則可以查看此CodePen集合中的所有互動式CodePen演示。
使用我們的其他CSS教程實現更多成就：
- ? 純CSS標籤，可訪問且鍵盤友好
- ? CSS的粘頁腳
- ? 純CSS工具提示
- ? 如何使用CSS和JavaScript創建互動式「贊」按鈕
對flexbox有任何疑問嗎？在評論部分提問！
…
別忘了加入我們的速成班，以加快WordPress網站的速度。通過一些簡單的修復，您甚至可以減少50-80％的載入時間：
Karol K和Chris Fitzgerald的布局和演示。