什麼是彈性盒？

Flexbox 是一款功能強(qiáng)大的 CSS 工具，讓創(chuàng)建響應(yīng)式且靈活的佈局比以往更容易。它簡(jiǎn)化了諸如對(duì)齊元素、管理間距以及針對(duì)不同螢?zāi)怀叽缯{(diào)整佈局等任務(wù)。

在本部落格中，我們將介紹 Flexbox 的基礎(chǔ)知識(shí)，解釋其屬性如何運(yùn)作，並提供可在專(zhuān)案中使用的實(shí)際範(fàn)例。最後，您將具備創(chuàng)建在任何裝置上看起來(lái)都很棒的佈局的技能。讓我們開(kāi)始吧！

Flexbox、Grid、Float：簡(jiǎn)單比較

使用 CSS 建立佈局時(shí)，有多種方法可供選擇，每種方法都有其優(yōu)點(diǎn)。讓我們來(lái)看看 Flexbox、Grid 和 Float 之間有何不同。

Flexbox：靈活且一維

Flexbox 專(zhuān)為一維佈局而設(shè)計(jì)。當(dāng)您需要對(duì)齊行或列中的元素時(shí)，它效果最佳，非常適合導(dǎo)覽列、居中內(nèi)容或表單元素等更簡(jiǎn)單的佈局。

優(yōu)點(diǎn)：

• 易於用於空間的對(duì)齊和分佈。
• 非常適合響應(yīng)式設(shè)計(jì)。
• 好好處理動(dòng)態(tài)內(nèi)容。

何時(shí)使用：

• 用於在單一方向（行或列）上對(duì)齊和分佈元素。
• 當(dāng)您希望元素根據(jù)可用空間自動(dòng)調(diào)整。

網(wǎng)格：強(qiáng)大的二維佈局功能

網(wǎng)格是一個(gè)更強(qiáng)大的佈局工具，可讓您建立行和列。與一次僅處理一維的 Flexbox 不同，Grid 非常適合用於建立複雜的佈局，例如多列設(shè)計(jì)或整個(gè)頁(yè)面佈局。

優(yōu)點(diǎn)：

• 適用於行和列。
• 非常適合具有多個(gè)元素的複雜佈局。
• 更好地控制元素的位置和大小。

何時(shí)使用：

• 用於建立複雜的頁(yè)面佈局，例如全頁(yè)網(wǎng)格或多列設(shè)計(jì)。
• 當(dāng)您需要精確控制兩個(gè)維度時(shí)。

浮動(dòng)：老式和有限

Float 最初用於文字換行和佈局目的，但現(xiàn)在對(duì)於一般佈局任務(wù)來(lái)說(shuō)已經(jīng)過(guò)時(shí)了。它可以創(chuàng)建佈局，但通常需要額外的工作來(lái)清除浮動(dòng)和管理間距。

優(yōu)點(diǎn)：

• 易於用於特定任務(wù)，例如將文字環(huán)繞圖像。
• 所有瀏覽器都支援。

何時(shí)使用：

• 用於小型的佈局調(diào)整，例如將文字環(huán)繞圖像。
• 不建議用於複雜佈局或響應(yīng)式設(shè)計(jì)。

注意：

• Flexbox 非常適合簡(jiǎn)單的一維佈局，並提供快速、靈活的方式來(lái)排列項(xiàng)目。
• 網(wǎng)格更適合二維佈局，提供更多對(duì)複雜設(shè)計(jì)的控制
• Float 對(duì)現(xiàn)代版面來(lái)說(shuō)已經(jīng)過(guò)時(shí)了，應(yīng)該避免使用 Flexbox 或 Grid。

Flexbox 基礎(chǔ)：關(guān)鍵屬性和軸解釋

要開(kāi)始使用 Flexbox，必須了解定義其行為的核心屬性。在這裡，我們將回顧最重要的 Flexbox 屬性，並解釋它們?nèi)绾螀f(xié)同工作來(lái)創(chuàng)建靈活的佈局。

1。顯示：flex

display: flex 屬性是任何 Flexbox 版面的基礎(chǔ)。透過(guò)將此屬性套用到容器，您可以將其變成 Flex 容器，並且其子元素成為 Flex 專(zhuān)案。這使您能夠使用 Flexbox 提供的所有強(qiáng)大的對(duì)齊和佈局屬性。

• 工作原理：

.container {
  display: flex;
}

• 效果： 這使得容器成為 Flex 容器，並且其所有直接子級(jí)現(xiàn)在都是 Flex 項(xiàng)目，將遵循 Flexbox 規(guī)則進(jìn)行對(duì)齊和分佈。

2。彎曲方向

flex-direction 屬性定義了彈性項(xiàng)目排列的方向。它可以是四個(gè)值之一：

• row（預(yù)設(shè)）：項(xiàng)目水平排列（從左到右）。
• 列：項(xiàng)目垂直排列（由上至下）。
• row-reverse：項(xiàng)目水平排列，但順序相反。
• column-reverse：項(xiàng)目垂直排列，但順序相反。

範(fàn)例：

.container {
  display: flex;
  flex-direction: column;
}

3。調(diào)整內(nèi)容

justify-content 屬性沿著主軸（由 flex-direction 設(shè)定的方向）對(duì)齊 Flex 項(xiàng)目。它有助於分配物品之間和周?chē)目臻g。

• 價(jià)值觀：
  • flex-start：將項(xiàng)目與容器的開(kāi)頭對(duì)齊。
  • flex-end：將項(xiàng)目與容器的末端對(duì)齊。
  • center：將專(zhuān)案置中對(duì)齊。
  • space- Between：以相等的間距分佈項(xiàng)目。
  • space-around：以相等的空間分佈專(zhuān)案。

範(fàn)例：

.container {
  display: flex;
  justify-content: center;
}

4。對(duì)齊項(xiàng)目
align-items 屬性沿著橫軸（垂直於主軸）對(duì)齊彈性項(xiàng)目。當(dāng)彎曲方向?yàn)樾袝r(shí)，它控制項(xiàng)目的垂直對(duì)齊；當(dāng)方向?yàn)榱袝r(shí)，它控制項(xiàng)目的水平對(duì)齊。

• 價(jià)值觀：
  • flex-start：將專(zhuān)案與橫軸的起點(diǎn)對(duì)齊。
  • flex-end：將項(xiàng)目與橫軸的末端對(duì)齊。
  • center：將項(xiàng)目在橫軸的中心對(duì)齊。
  • 拉伸：拉伸項(xiàng)目以填充容器（預(yù)設(shè)行為）。
  • 基線：沿著基線對(duì)齊項(xiàng)目。

範(fàn)例：

.container {
  display: flex;
}

了解主軸和交叉軸

• 主軸 是 Fexbox 排列其項(xiàng)目的主軸。它可以是水平（行）或垂直（列），取決於 flex-direction 的值。
• 橫軸垂直於主軸。如果主軸是水平的（行），則橫軸是垂直的。如果主軸是垂直的（柱），則橫軸是水平的。

當(dāng)flex-direction: row時(shí)，主軸為水平方向，橫軸為垂直方向。

flex-direction:column時(shí)，主軸為垂直方向，交叉軸為水平方向。

Flexbox 範(fàn)例：您可以建立的簡(jiǎn)單佈局

現(xiàn)在我們已經(jīng)介紹了 Flexbox 的基礎(chǔ)知識(shí)，讓我們來(lái)看一些簡(jiǎn)單的範(fàn)例，看看它是如何實(shí)際運(yùn)作的。

1。居中元素
Flexbox 讓元素水平和垂直居中變得輕而易舉。

HTML：

.container {
  display: flex;
  flex-direction: column;
}

結(jié)果：

2。建立一個(gè)簡(jiǎn)單的導(dǎo)覽列
Flexbox 非常適合建立水平導(dǎo)覽列。

HTML：

.container {
  display: flex;
  justify-content: center;
}

結(jié)果：

3。建立簡(jiǎn)單的響應(yīng)式網(wǎng)格
Flexbox 也可以用於建立簡(jiǎn)單的響應(yīng)式網(wǎng)格，而無(wú)需媒體查詢。

HTML：

.container {
  display: flex;
  align-items: center;
}

結(jié)果：

這些範(fàn)例僅展示了您可以使用 Flexbox 建立的一些強(qiáng)大佈局。當(dāng)您越來(lái)越熟悉它時(shí)，您可以結(jié)合這些技術(shù)來(lái)建立更複雜的設(shè)計(jì)。

進(jìn)階 Flexbox 技術(shù)：巢狀容器、順序和 Flex-Wrap

在本節(jié)中，我們將探討一些更進(jìn)階的 Flexbox 功能，例如巢狀容器、order 和 flex-wrap。這些技術(shù)將使您能夠更好地控制佈局並允許複雜的設(shè)計(jì)。

1。巢狀 Flex 容器
有時(shí)，您可能需要在佈局中建立佈局。 Flexbox 可讓您將 Flex 容器嵌套在一起以進(jìn)行更多控制。

HTML：

.container {
  display: flex;
}

結(jié)果：

在此範(fàn)例中，.outer-container 是一個(gè) Flex 容器，其內(nèi)部有兩個(gè)巢狀的 .inner-container Flex 容器。這允許您在主 Flex 容器中建立更複雜的佈局。

2。使用 order 更改商品順序
Flexbox 允許您使用 order 屬性來(lái)控制項(xiàng)目的順序。預(yù)設(shè)情況下，所有項(xiàng)目都根據(jù)其 HTML 位置進(jìn)行排序。但透過(guò) order，您可以在不修改 HTML 的情況下更改視覺(jué)順序。

HTML：

.container {
  display: flex;
  flex-direction: column;
}

結(jié)果：

在此範(fàn)例中，我們更改了項(xiàng)目的順序，即使它們?cè)?HTML 中的位置是 1-2-3。 order 屬性可讓您直觀地重新排列項(xiàng)目。

3。使用 flex-wrap 讓項(xiàng)目換行
當(dāng)空間不足時(shí)，flex-wrap 屬性允許 Flex 項(xiàng)目換行到多行。這對(duì)於您希望項(xiàng)目適應(yīng)不同螢?zāi)怀叽绲捻憫?yīng)式佈局特別有用。

HTML：

.container {
  display: flex;
  justify-content: center;
}

結(jié)果：

在此範(fàn)例中，如果空間不足，flex-wrap:wrap 屬性允許項(xiàng)目換行到下一行，這使其成為創(chuàng)建響應(yīng)式佈局的絕佳工具。

注意：

• 巢狀 Flex 容器：在其他 Flex 容器內(nèi)使用 Flexbox 以更好地控制佈局。
• 順序：在不更改 HTML 結(jié)構(gòu)的情況下更改項(xiàng)目的視覺(jué)順序。
• Flex-Wrap：允許項(xiàng)目換行，對(duì)於響應(yīng)式佈局很有用。

這些先進(jìn)的技術(shù)為您在使用 Flexbox 建造佈局時(shí)提供了更大的靈活性和控制力。

Flexbox 的常見(jiàn)錯(cuò)誤以及如何避免這些錯(cuò)誤

儘管 Flexbox 功能強(qiáng)大，但一些常見(jiàn)的陷阱可能會(huì)導(dǎo)致意想不到的結(jié)果。以下是您可能會(huì)遇到的一些錯(cuò)誤以及避免這些錯(cuò)誤的提示：

1。意外溢位

問(wèn)題：
如果 Flex 項(xiàng)目的內(nèi)容未如預(yù)期縮小，則它們可能會(huì)溢出容器。

範(fàn)例：

.container {
  display: flex;
}

在此範(fàn)例中，長(zhǎng)文本將版面配置推出容器。

修正：
使用flex-shrink屬性或新增overflow:hidden;或自動(dòng)換行：斷詞；.

.container {
  display: flex;
  flex-direction: column;
}

2。不考慮預(yù)設(shè)保證金

問(wèn)題：
瀏覽器通常將預(yù)設(shè)邊距套用到諸如

之類(lèi)的元素?；?

，這會(huì)破壞 Flexbox 對(duì)齊。

範(fàn)例：

.container {
  display: flex;
  justify-content: center;
}

預(yù)設(shè)邊距會(huì)導(dǎo)致間距不均勻，使佈局看起來(lái)不平衡。

修正：
透過(guò) CSS 重設(shè)來(lái)重設(shè)邊距或?yàn)樵孛鞔_設(shè)定邊距。

.container {
  display: flex;
  align-items: center;
}

3。使用 flex: 1 而不了解其行為

問(wèn)題：
設(shè)定 flex: 1 會(huì)使項(xiàng)目均勻地增長(zhǎng)和收縮，如果一個(gè)項(xiàng)目的內(nèi)容明顯大於其他項(xiàng)目，這可能會(huì)導(dǎo)致意外的結(jié)果。

修正：
透過(guò)指定成長(zhǎng)、收縮和基礎(chǔ)值來(lái)微調(diào) flex 屬性。例如：

<div>



<p><strong>CSS:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.container {
  display: flex;
  justify-content: center;  /* Horizontally center */
  align-items: center;      /* Vertically center */
  height: 100vh;            /* Full viewport height */
}

4。誤解align-items和justify-content

問(wèn)題：
混淆align-items（控制橫軸）和justify-content（控制主軸）可能會(huì)導(dǎo)致佈局不符合預(yù)期。

修正：
永遠(yuǎn)記住：

• justify-content：水平對(duì)齊（行中的主軸）。
• align-items：垂直對(duì)齊（行中的交叉軸）。

5。忘記響應(yīng)式佈局的 flex-wrap

問(wèn)題：
預(yù)設(shè)情況下，F(xiàn)lexbox 不會(huì)包裝項(xiàng)目，這可能會(huì)導(dǎo)致它們?cè)谳^小的螢?zāi)簧鲜湛s太多。

修正：
新增 flex-wrap: 包裹；確?？臻g不足時(shí)項(xiàng)目移至下一行。

.container {
  display: flex;
}

注意：
避免這些常見(jiàn)錯(cuò)誤將幫助您創(chuàng)建既靈活又具有視覺(jué)吸引力的佈局。記住這些提示，以充分利用 Flexbox 的強(qiáng)大功能！

Flexbox 的實(shí)際應(yīng)用

Flexbox 在靈活性和回應(yīng)能力至關(guān)重要的場(chǎng)景中表現(xiàn)出色。以下是 Flexbox 被證明最有益的一些實(shí)際應(yīng)用：

1。建立響應(yīng)式佈局
Flexbox 簡(jiǎn)化了無(wú)縫適應(yīng)不同螢?zāi)怀叽绲陌婷嬖O(shè)計(jì)流程。無(wú)論是行動(dòng)優(yōu)先的設(shè)計(jì)還是以桌面為中心的佈局，F(xiàn)lexbox 都可以輕鬆實(shí)現(xiàn)對(duì)齊和間距。

• 範(fàn)例： 透過(guò)將 Flexbox 與媒體查詢結(jié)合，建立一個(gè)產(chǎn)品網(wǎng)格，從行動(dòng)裝置上的兩列調(diào)整為桌面上的四列。

.container {
  display: flex;
  flex-direction: column;
}

2。處理動(dòng)態(tài)內(nèi)容
使用 Flexbox，您可以輕鬆管理內(nèi)容大小不固定的佈局。物品會(huì)自動(dòng)調(diào)整以適應(yīng)空間，而不會(huì)破壞設(shè)計(jì)。

範(fàn)例：顯示具有不同標(biāo)題和描述的部落格文章列表，確保它們均勻?qū)R，無(wú)論內(nèi)容長(zhǎng)度如何。

.container {
  display: flex;
  justify-content: center;
}

3。建立導(dǎo)覽列
Flexbox 非常適合建立水平對(duì)齊且空間元素均勻的導(dǎo)覽列。您甚至可以透過(guò)包裝項(xiàng)目來(lái)使導(dǎo)航適應(yīng)較小的螢?zāi)弧?

.container {
  display: flex;
  align-items: center;
}

4。居中內(nèi)容
Flexbox 讓頁(yè)面上的內(nèi)容（垂直和水平）輕鬆居中。這對(duì)於啟動(dòng)畫(huà)面、模式或英雄部分特別有用。

<div>



<p><strong>CSS:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.container {
  display: flex;
  justify-content: center;  /* Horizontally center */
  align-items: center;      /* Vertically center */
  height: 100vh;            /* Full viewport height */
}

5。創(chuàng)建等高卡
在許多設(shè)計(jì)中，無(wú)論內(nèi)容長(zhǎng)度如何，卡片等元素都需要具有相同的高度。 Flexbox 可確保一致的高度和對(duì)齊，無(wú)需額外的修改。

<nav>



<p><strong>CSS:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.navbar {
  display: flex;
  justify-content: space-around;  /* Evenly spaces the links */
  background-color: #333;
}

.navbar a {
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}

注意：
Flexbox 是創(chuàng)建響應(yīng)式動(dòng)態(tài)佈局、處理各種內(nèi)容大小和簡(jiǎn)化對(duì)齊的首選解決方案。無(wú)論您是針對(duì)行動(dòng)裝置還是桌上型電腦進(jìn)行設(shè)計(jì)，F(xiàn)lexbox 都能確保您的佈局實(shí)用且具有視覺(jué)吸引力。

視覺(jué)效果和程式碼

為了讓 Flexbox 概念更容易理解，我們將提供圖表、即時(shí)程式碼範(fàn)例和語(yǔ)法突出顯示的程式碼片段。視覺(jué)教具和互動(dòng)式範(fàn)例可確保您有效掌握關(guān)鍵思想。

1。用圖表理解軸心
Flexbox 使用兩個(gè)軸：

• 主軸：彈性項(xiàng)目排列的方向。
• Cross Axis：與主軸垂直的方向。

這是一個(gè)視覺(jué)表示：

2?；?dòng)範(fàn)例

範(fàn)例 1：將項(xiàng)目置中
此 CodePen 範(fàn)例展示如何將專(zhuān)案垂直和水平居中：

3。透過(guò)語(yǔ)法突出顯示來(lái)說(shuō)明對(duì)齊

範(fàn)例 2：對(duì)齊 Flex 項(xiàng)目
使用align-items屬性來(lái)控制橫軸上的垂直對(duì)齊。

.container {
  display: flex;
}

4。嵌套容器的現(xiàn)場(chǎng)展示
嵌套 Flexbox 容器可以示範(fàn)進(jìn)階佈局。查看這個(gè) Codepen 範(fàn)例：

給讀者的提示

1. 使用程式碼進(jìn)行實(shí)驗(yàn)：即時(shí)範(fàn)例是互動(dòng)式的 - 調(diào)整屬性以即時(shí)觀察變化。
2. 使用視覺(jué)化工具：像 Flexbox Froggy 這樣的網(wǎng)站提供了一種練習(xí) Flexbox 概念的有趣方式。
3. 新增語(yǔ)法反白：Dev.to 和 Markdown 編輯器等平臺(tái)會(huì)自動(dòng)格式化您的程式碼以提高可讀性。

注意：
視覺(jué)輔助工具、現(xiàn)場(chǎng)範(fàn)例和語(yǔ)法突出顯示的片段使學(xué)習(xí) Flexbox 更具互動(dòng)性和吸引力。探索提供的連結(jié)和圖表以鞏固您的理解。

無(wú)障礙

Flexbox 不僅僅是一個(gè)創(chuàng)建具有視覺(jué)吸引力的佈局的工具；它也是一個(gè)工具。如果正確使用，它還有助於提高網(wǎng)路可訪問(wèn)性。無(wú)障礙佈局確保您的網(wǎng)站可供所有人（包括殘疾人）使用。

Flexbox 如何增強(qiáng)輔助功能

1。使用 Flexbox 的語(yǔ)意 HTML
Flexbox 與

、

.container {
  display: flex;
  flex-direction: column;
}

2。鍵盤(pán)導(dǎo)航的彈性
Flexbox 可以更輕鬆地建立鍵盤(pán)友善的佈局。例如，它以確保邏輯標(biāo)籤順序的方式簡(jiǎn)化了按鈕和連結(jié)的排列。

提示：使用 Tab 鍵測(cè)試導(dǎo)航，以確保可聚焦元素之間的流暢流動(dòng)。

3。適合螢?zāi)婚喿x器的自適應(yīng)內(nèi)容
Flexbox 有助於維護(hù) HTML 原始碼中的邏輯內(nèi)容順序，同時(shí)以視覺(jué)方式重新排列元素。這可確保螢?zāi)婚喿x器可以按預(yù)期順序解釋內(nèi)容。

避免：過(guò)度使用 order 屬性，因?yàn)樗赡軙?huì)讓依賴(lài)輔助設(shè)備的使用者感到困惑。

可存取 Flexbox 佈局的最佳實(shí)踐

1。保留邏輯 HTML 順序
始終按照邏輯閱讀順序建立 HTML。使用 Flexbox 進(jìn)行視覺(jué)調(diào)整，而不是改變內(nèi)容的自然流程。

2。必要時(shí)使用 ARIA 地標(biāo)
添加 ARIA 角色（例如，role="navigation"）來(lái)為螢?zāi)婚喿x器闡明元素的用途。

3。使用輔助技術(shù)進(jìn)行測(cè)試
使用螢?zāi)婚喿x器（例如 NVDA、VoiceOver）和輔助使用檢查器（例如 Lighthouse 或 Axe）等工具來(lái)驗(yàn)證您的 Flexbox 佈局。

提供足夠的對(duì)比和焦點(diǎn)指示器
Flexbox 通常會(huì)影響按鈕和連結(jié)的佈局。確保它們具有足夠的對(duì)比度，並且在使用鍵盤(pán)導(dǎo)航時(shí)明顯聚焦。

.container {
  display: flex;
}

注意：
當(dāng)與語(yǔ)義 HTML 和最佳實(shí)踐相結(jié)合時(shí)，F(xiàn)lexbox 可以極大地促進(jìn)無(wú)障礙設(shè)計(jì)。透過(guò)使用輔助工具測(cè)試您的佈局並維護(hù)邏輯內(nèi)容順序，您可以建立既靈活又具有包容性的網(wǎng)站。

學(xué)習(xí)線上課程，掌握職場(chǎng)技能

Flexbox 最好透過(guò)實(shí)作練習(xí)來(lái)學(xué)習(xí)！現(xiàn)在您已經(jīng)探索了基礎(chǔ)知識(shí)、範(fàn)例甚至高級(jí)技術(shù)，是時(shí)候?qū)⒛闹R(shí)付諸實(shí)踐了。

實(shí)踐思路

1。從頭開(kāi)始建立佈局
挑戰(zhàn)自己，使用 Flexbox 設(shè)計(jì)簡(jiǎn)單的網(wǎng)頁(yè)佈局。例如，建立響應(yīng)式導(dǎo)覽列、照片庫(kù)或居中卡片佈局。

2。修改部落格的範(fàn)例
嘗試本部落格中提供的程式碼片段。調(diào)整 justify-content、align-items 或 flex-direction 等屬性，看看它們?nèi)绾胃淖儊丫帧?

3。玩 Flexbox 遊戲
使用 Flexbox Froggy 等互動(dòng)式工具以有趣且引人入勝的方式提高您的技能。

運(yùn)用您的知識(shí)
利用您所學(xué)到的知識(shí)並開(kāi)始建立！無(wú)論是小型個(gè)人專(zhuān)案還是現(xiàn)有網(wǎng)站的版面調(diào)整，練習(xí) Flexbox 都會(huì)鞏固您的技能。

加入對(duì)話
請(qǐng)隨意分享您的項(xiàng)目、提出問(wèn)題或在評(píng)論中留下您最喜歡的 Flexbox 技巧。讓我們一起成長(zhǎng)、一起學(xué)習(xí)吧！

以上是Flexbox 變得簡(jiǎn)單：使用 CSS 建立靈活的佈局的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！