？目錄

1. CSS Flexbox 簡介
2. 基本屬性
3. 高級屬性
4. 結(jié)論

---

?? CSS Flexbox 簡介

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

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

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

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

** 基本屬性 **

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

注意： 要與 CodePen 示例進(jìn)行交互，請單擊插圖右上角的“在 CodePen 上編輯”文本。這使您可以實(shí)時(shí)使用代碼！

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

2。 flex-direction: 這決定了你的零食將排列在哪個(gè)方向。請記住，默認(rèn)情況下，零食排成一排，但 flex 方向?yàn)槟闾峁┝?em>力量來改變這一點(diǎn)。這是它的值：

a。 row(默認(rèn)):你的零食從左到右整齊地排成一排。

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

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

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

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

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

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

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

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

d。 space- Between: 第一個(gè)小吃被推到開頭，最后一個(gè)小吃被推到末尾，其余的在它們之間均勻分布。

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

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

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

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

a。 flex-start：在交叉軸的起點(diǎn)對齊項(xiàng)目。

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

c. center：將項(xiàng)目沿橫軸居中。

d。拉伸：拉伸項(xiàng)目以填充容器（塊級項(xiàng)目的默認(rèn)值）。

e?；€：沿著文本基線對齊項(xiàng)目。

讓我們看看對齊項(xiàng)目的實(shí)際效果。

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

** 高級屬性 **

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

Align-content 的值

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

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

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

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

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

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

g。拉伸（默認(rèn)）：我們的零食都“拉伸”以填滿零食容器的高度。

話已經(jīng)說完了，讓我們靈活付諸行動（看看我做了什么？沒有人？好吧？?♀?）。

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

查看此 CodePen 的交互式插圖！

？對齊項(xiàng)目與對齊內(nèi)容：有什么區(qū)別？
盡管聽起來很相似，但align-items 和align-content 并不相同。讓我們澄清一下區(qū)別：

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

align-content 沿 Flex 容器的橫軸對齊多行項(xiàng)目（當(dāng)處于活動狀態(tài)時(shí)，即 flex-wrap:wrap）。

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

**記住**：

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

這是它的值：

a。 nowrap（默認(rèn)）：你的零食決定它們不需要喘息空間，只是擠成一排/一列。

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

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

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

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

a。 flex-grow：確定彈性項(xiàng)目將增長多少。

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

c. flex-basis：確定項(xiàng)目開始增大或縮小之前的起始尺寸。

這是一個(gè) CodePen，演示了 flex 屬性及其組件

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

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

a。 auto（默認(rèn)）：從容器的align-items屬性繼承對齊方式。

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

c. flex-end：將項(xiàng)目對齊到橫軸的末端。

d。 center：將項(xiàng)目沿橫軸居中。

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

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

查看此 CodePen 的交互式插圖！

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

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

1. CSS 技巧：Flexbox 完整指南

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

1. MDN 網(wǎng)絡(luò)文檔 - CSS Flexbox

包含解釋、示例和瀏覽器兼容性的官方文檔。

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

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

以上是了解 CSS Flexbox：初學(xué)者指南！?。〉脑敿?xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！