？目錄

1. CSS Flexbox 簡(jiǎn)介
2. 基本屬性
3. 進(jìn)階屬性
4. 結(jié)論

---

?? CSS Flexbox 簡(jiǎn)介

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

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

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

無(wú)論您希望項(xiàng)目均勻分佈、分組到一側(cè)還是完美居中，F(xiàn)lexbox 都是您的首選?，F(xiàn)在我們知道 Flexbox 是強(qiáng)迫癥的組織者，讓我們深入了解它用來(lái)實(shí)現(xiàn)奇蹟?shù)墓ぞ?！以下是它的基本屬性?/p>

** 基本屬性 **

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

注意： 要與 CodePen 範(fàn)例進(jìn)行交互，請(qǐng)點(diǎn)擊插圖右上角的「在 CodePen 上編輯」文字。這使您可以即時(shí)使用程式碼！

在 CodePen 上進(jìn)行數(shù)值實(shí)驗(yàn)：

2。 flex-direction: 這決定了你的點(diǎn)心要排列在哪個(gè)方向。請(qǐng)記住，預(yù)設(shè)情況下，零食排成一排，但 flex 方向?yàn)槟闾峁┝?em>力量來(lái)改變這一點(diǎn)。這是它的值：

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

b。 row-reverse: 這些物品翻轉(zhuǎn)方向並從右向左排列，非常適合當(dāng)你感到有點(diǎn)叛逆的時(shí)候！

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

d。 column-reverse: 堆疊從底部開(kāi)始向上建構(gòu)。

這是一個(gè)插圖，請(qǐng)隨意更改 flex-direction 值，以便您了解它們是如何運(yùn)作的。

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

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

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

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

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

e。 space-around: 零食周?chē)目臻g相等。

f。空間均勻： 零食周?chē)目臻g完全相等。

這是一個(gè)插圖，請(qǐng)隨意更改 justify-content 值，以便您可以看到它們是如何運(yùn)作的。

4。 Align-items：我們已經(jīng)使用 flex-direction 將零食排列成行或列，現(xiàn)在是時(shí)候決定我們希望它們?cè)诹闶橙萜髦械奈恢糜卸喔呋蚨嗟土恕Ｒ韵率撬墓餐担?/p>

a。 flex-start：在交叉軸的起點(diǎn)對(duì)齊專案。

b。 flex-end：在橫軸末端對(duì)齊項(xiàng)目。

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

d。拉伸：拉伸項(xiàng)目以填滿容器（區(qū)塊級(jí)項(xiàng)目的預(yù)設(shè)值）。

e。基線：沿著文字基線對(duì)齊項(xiàng)目。

讓我們來(lái)看看對(duì)齊物品的實(shí)際效果。

探索下面的程式碼筆，看看它的神奇作用！請(qǐng)隨意調(diào)整 CSS，看看它如何改變對(duì)齊方式。

** 高階屬性 **

1。 Align-content：align-content 屬性指定多行 Flex 項(xiàng)目（或類(lèi)比中的點(diǎn)心）如何在 Flex 容器（點(diǎn)心容器）內(nèi)沿著橫軸間隔開(kāi)。只有當(dāng)有多行或多列 Flex 項(xiàng)目時(shí)，它才會(huì)起作用，這意味著您的 Flex 容器必須包含包裝內(nèi)容（flex-wrap：wrap）。

Align-content 的值

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

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

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

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

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

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

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

話已經(jīng)說(shuō)完了，讓我們靈活付諸行動(dòng)（看看我做了什麼？沒(méi)有人？好？?♀?）。

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

看看此 CodePen 的互動(dòng)式插圖！

？對(duì)齊項(xiàng)目與對(duì)齊內(nèi)容：有什麼不同？
儘管聽(tīng)起來(lái)很相似，但align-items 和align-content 並不相同。讓我們澄清一下差異：

align-items 沿橫軸對(duì)齊各個(gè) Flex 項(xiàng)目。將其視為在單行/列中設(shè)定項(xiàng)目本身的對(duì)齊方式。

align-content 沿著 Flex 容器的橫軸對(duì)齊多行項(xiàng)目（當(dāng)處?kù)痘顒?dòng)狀態(tài)時(shí)，即 flex-wrap:wrap）。

？重點(diǎn)：
align-items 處理單一彈性容器內(nèi)的所有項(xiàng)目，而align-content 處理多行項(xiàng)目（只有當(dāng)有多個(gè)換行時(shí)）。

**記住**：

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

這是它的值：

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

b。包裹：現(xiàn)在，他們需要喘息空間，因此當(dāng)?shù)谝恍?列中沒(méi)有更多空間時(shí)，他們溢出到下一行或下一列。

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

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

3。 Flex：這是一個(gè)決定性的屬性，它設(shè)定 Flex 項(xiàng)目（我們的零食）如何增加或縮小以適應(yīng)其 Flex 容器中的可用空間。它是 3 個(gè)子屬性的簡(jiǎn)寫(xiě)：

a。 flex-grow：確定彈性項(xiàng)目將會(huì)成長(zhǎng)多少。

b。 flex-shrink：決定當(dāng)空間緊張時(shí)彈性項(xiàng)目會(huì)縮小多少。

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

這是一個(gè) CodePen，示範(fàn)了 flex 屬性及其組件

隨意打開(kāi)它並與之交互，看看調(diào)整彈性值如何改變項(xiàng)目的佈局。

4。 Align-self：此屬性會(huì)覆寫(xiě) Flex 容器的對(duì)齊項(xiàng)目值。它基本上將項(xiàng)目在橫軸上對(duì)齊。這是它的值：

a。 auto（預(yù)設(shè)）：從容器的align-items屬性繼承對(duì)齊方式。

b。 flex-start：將項(xiàng)目在橫軸的起點(diǎn)對(duì)齊。

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

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

e。拉伸：拉伸項(xiàng)目以填滿橫軸（如果不是固定大?。?。

f?；€：沿著文字基線對(duì)齊項(xiàng)目。

看看此 CodePen 的互動(dòng)式插圖！

？結(jié)論
CSS Flexbox 簡(jiǎn)化了我們處理版面的方式。借助一些關(guān)鍵屬性，例如 display：flex、flex-direction、justify-content 和align-items，您可以輕鬆製作響應(yīng)靈敏且對(duì)齊精美的設(shè)計(jì)。

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

1. CSS 技巧：Flexbox 完整指南

涵蓋每個(gè) Flexbox 屬性和用例的詳細(xì)指南。

1. MDN 網(wǎng)路文件 - CSS Flexbox

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

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

下次再見(jiàn)，你友善的鄰居作家（是的，這在我看來(lái)是有道理的）。 ？再見(jiàn)！ ！ ！

以上是了解 CSS Flexbox：初學(xué)者指南！的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！