了解 CSS Flexbox：初學者指南！

？目錄

1. CSS Flexbox 簡介
2. 基本屬性
3. 進階屬性
4. 結論

---

?️ CSS Flexbox 簡介

CSS Flexbox 是解決您所有版面問題的終極解決方案。在本文中，我們完全專注於掌握 Flexbox、探索它的屬性以及如何使用它輕鬆創建令人驚嘆的響應式設計。讓我們深入研究並使這些佈局變得無縫。

靈活框佈局（Flexbox）是一種一維佈局方法，它沿著單一軸（行或列）排列項目。如果你是像我一樣的視覺學習者，這可能沒有多大意義，所以讓我給你畫一張圖 -

想像一下，你有一個盒子，裡面裝滿了你最喜歡的東西，可能是書，也可能是你最喜歡的零食，無論什麼東西都會讓你的船搖搖欲墜，但它們完全混亂。 Flexbox 就像一個神奇的組織者，帶著一點強迫症，突然出現來拯救世界。它將所有內容整齊地排列在行和列中，以滿足您的確切需求。

無論您希望項目均勻分佈、分組到一側還是完美居中，Flexbox 都是您的首選。現在我們知道 Flexbox 是強迫症的組織者，讓我們深入了解它用來實現奇蹟的工具！以下是它的基本屬性：

** 基本屬性 **

1. 顯示：flex：這就是一切開始的地方！通過將此屬性添加到容器（裝滿您最喜歡的零食的盒子）中，所有零食（子元素）將默認沿單個軸整齊排列，即一行。但別擔心，如果您願意，您可以切換到列！ ”

注意： 要與 CodePen 範例進行交互，請點擊插圖右上角的「在 CodePen 上編輯」文字。這使您可以即時使用程式碼！

在 CodePen 上進行數值實驗：

2。 flex-direction: 這決定了你的點心要排列在哪個方向。請記住，預設情況下，零食排成一排，但 flex 方向為你提供了力量來改變這一點。這是它的值：

a。 row(預設):你的零食從左到右整齊地排成一排。

b。 row-reverse: 這些物品翻轉方向並從右向左排列，非常適合當你感到有點叛逆的時候！

c.專欄：你的物品垂直堆疊起來，就像小吃塔！想像一下每一種零食（或彈性物品）都被放置在另一個之上，形成一個美味的零食塔。

d。 column-reverse: 堆疊從底部開始向上建構。

這是一個插圖，請隨意更改 flex-direction 值，以便您了解它們是如何運作的。

3。 Justify-content：這是彈性容器的魔杖，它用它來分配零食之間的空間。它在某種程度上決定了零食盒中零食的排列方式。以下是它的主要選項：

a。 flex-start(default): 所有零食都聚集在行或列的開頭。

b。 flex-end: 所有零食都聚集在行或列的末尾。

c. center:零食聚集在行或列的中間。

d。 space- Between: 第一個小吃被推到開頭，最後一個小吃被推到末尾，其餘的在它們之間均勻分佈。

e。 space-around: 零食周圍的空間相等。

f。空間均勻： 零食周圍的空間完全相等。

這是一個插圖，請隨意更改 justify-content 值，以便您可以看到它們是如何運作的。

4。 Align-items：我們已經使用 flex-direction 將零食排列成行或列，現在是時候決定我們希望它們在零食容器中的位置有多高或多低了。以下是它的共同值：

a。 flex-start：在交叉軸的起點對齊專案。

b。 flex-end：在橫軸末端對齊項目。

c. center：將物品沿著橫軸居中。

d。拉伸：拉伸項目以填滿容器（區塊級項目的預設值）。

e。基線：沿著文字基線對齊項目。

讓我們來看看對齊物品的實際效果。

探索下面的程式碼筆，看看它的神奇作用！請隨意調整 CSS，看看它如何改變對齊方式。

** 高階屬性 **

1。 Align-content：align-content 屬性指定多行 Flex 項目（或類比中的點心）如何在 Flex 容器（點心容器）內沿著橫軸間隔開。只有當有多行或多列 Flex 項目時，它才會起作用，這意味著您的 Flex 容器必須包含包裝內容（flex-wrap：wrap）。

Align-content 的值

a。 flex-start：所有行的零食都聚集在零食容器的頂部，使容器的其餘部分感覺相當空。

b。 flex-end：成排的零食聚集在零食容器的底部，從而在頂部留下空白空間（頂部孤獨）。

c.中心：一排排零食聚集在中間，在零食容器的頂部和底部留出空間。

d。 space- Between: 零食行均勻分佈，第一行在頂部，最後一行在底部。

e。 space-around：行間的間距相等。

f。 space-evenly：行間的間距相等。

g。拉伸（預設）：我們的零食都「拉伸」以填滿零食容器的高度。

話已經說完了，讓我們靈活付諸行動（看看我做了什麼？沒有人？好？‍♀️）。

您可以將align-content值替換為flex-start、flex-end、center、space- Between、space-around、space-evenly或stretch來觀察變化。

看看此 CodePen 的互動式插圖！

？對齊項目與對齊內容：有什麼不同？
儘管聽起來很相似，但align-items 和align-content 並不相同。讓我們澄清一下差異：

align-items 沿橫軸對齊各個 Flex 項目。將其視為在單行/列中設定項目本身的對齊方式。

align-content 沿著 Flex 容器的橫軸對齊多行項目（當處於活動狀態時，即 flex-wrap:wrap）。

？重點：
align-items 處理單一彈性容器內的所有項目，而align-content 處理多行項目（只有當有多個換行時）。

**記住**：

Property	Focus Area	When to use
Align-items	Align individual items	When you are adjusting the vertical alignment of single items
Align-content	Align rows of items	When flex-wrap: wrap is used (and there are multiple rows)

2。 Flex-wrap：此屬性決定您的彈性項目（又稱您最喜歡的零食）是否應該全部擠入一行/列，或者在空間不足時禮貌地包裝到多行/列上。

這是它的值：

a。 nowrap（預設）：你的零食決定它們不需要喘息空間，只是擠成一排/一列。

b。包裹：現在，他們需要喘息空間，因此當第一行/列中沒有更多空間時，他們溢出到下一行或下一列。

c .wrap-reverse：與換行幾乎相同，但它們以相反的方式進行。從下到上或從右到左，取決於彎曲方向。

這是一個 CodePen，示範了 flex-wrap 屬性的行為。您可以嘗試不同的值（nowrap、wrap 和 wrap-reverse），看看 Flex 容器如何處理零食的溢出。

3。 Flex：這是一個決定性的屬性，它設定 Flex 項目（我們的零食）如何增加或縮小以適應其 Flex 容器中的可用空間。它是 3 個子屬性的簡寫：

a。 flex-grow：確定彈性項目將會成長多少。

b。 flex-shrink：決定當空間緊張時彈性項目會縮小多少。

c. flex-basis：確定專案開始增加或縮小先前的起始尺寸。

這是一個 CodePen，示範了 flex 屬性及其組件

隨意打開它並與之交互，看看調整彈性值如何改變項目的佈局。

4。 Align-self：此屬性會覆寫 Flex 容器的對齊項目值。它基本上將項目在橫軸上對齊。這是它的值：

a。 auto（預設）：從容器的align-items屬性繼承對齊方式。

b。 flex-start：將項目在橫軸的起點對齊。

c. flex-end：將物品對齊到橫軸的末端。

d。 center：將專案沿橫軸居中。

e。拉伸：拉伸項目以填滿橫軸（如果不是固定大小）。

f。基線：沿著文字基線對齊項目。

看看此 CodePen 的互動式插圖！

？結論
CSS Flexbox 簡化了我們處理版面的方式。借助一些關鍵屬性，例如 display：flex、flex-direction、justify-content 和align-items，您可以輕鬆製作響應靈敏且對齊精美的設計。

？想要深入了解嗎？這裡有一些很棒的資源：

1. CSS 技巧：Flexbox 完整指南

涵蓋每個 Flexbox 屬性和用例的詳細指南。

1. MDN 網路文件 - CSS Flexbox

包含解釋、範例和瀏覽器相容性的官方文件。

掌握任何事物的關鍵是持續不斷的練習，所以一定要盡可能多地練習以鞏固你的理解。您使用這些工具越多，您就會對自己創建精美佈局的能力越有信心。

下次再見，你友善的鄰居作家（是的，這在我看來是有道理的）。 ？再見！ ！ ！

以上是了解 CSS Flexbox：初學者指南！的詳細內容。更多資訊請關注PHP中文網其他相關文章！