核心要點(diǎn)

• Flexbox 是一種 CSS 佈局模型，允許開發(fā)者創(chuàng)建複雜的 UI，無需依賴多餘的 CSS 和 JavaScript 技巧。它採用線性佈局模型，更易於水平或垂直佈局內(nèi)容，無需進(jìn)行間距計(jì)算。
• Flexbox 可用於創(chuàng)建網(wǎng)站的巨型導(dǎo)航菜單。該佈局模型允許創(chuàng)建簡單的導(dǎo)航欄、單下拉菜單段，並將單下拉菜單段限制為三列。 Flex 佈局對容器內(nèi)的元素具有響應(yīng)性，從而減少了媒體查詢的需求。
• 本教程中創(chuàng)建的最終巨型菜單並非完全響應(yīng)式。主菜單欄會在較小的屏幕上顯示，但巨型菜單將不可用，只有頂級鏈接可用。但是，本教程很好地演示了 Flexbox 的強(qiáng)大和簡潔性。
• 巨型菜單導(dǎo)航對於顯示所有選項(xiàng)非常有用，可有效用於電子商務(wù)網(wǎng)站。但是，在實(shí)施之前，務(wù)必考慮此類功能的可用性並了解其優(yōu)缺點(diǎn)。

如您所知，F(xiàn)lexbox 近期隨著瀏覽器支持度的提高而備受關(guān)注。它允許開發(fā)者構(gòu)建複雜的 UI，無需依賴多餘的 CSS 和 JavaScript 技巧。

Flexbox 使用線性佈局模型，允許我們水平或垂直佈局內(nèi)容，無需進(jìn)行間距計(jì)算。 Flex 佈局對容器內(nèi)的元素具有響應(yīng)性，從而減少了媒體查詢的需求。

在本文中，我將使用此佈局模型來構(gòu)建一個(gè)巨型導(dǎo)航菜單，在此過程中，您將看到使用 Flexbox 構(gòu)建和擴(kuò)展 UI 組件是多麼簡單。

我不會在這裡詳細(xì)討論各個(gè) Flexbox 屬性，而是重點(diǎn)介紹這些功能的實(shí)際應(yīng)用。有關(guān) Flexbox 的基本介紹，請參考以下資源：

• Guy Routledge 的 Flexbox 教程
• Flexbox 初學(xué)者友好型介紹
• Flexbox 完全指南

我們將構(gòu)建什麼？

要了解我將向您展示如何構(gòu)建的內(nèi)容，請查看全屏 CodePen。

本教程分為三個(gè)部分：

1. 構(gòu)建導(dǎo)航欄：使用 Flexbox 為我們虛構(gòu)的電子商務(wù)平臺構(gòu)建一個(gè)簡單的導(dǎo)航欄
2. 構(gòu)建單個(gè)下拉菜單段
3. 將單個(gè)下拉菜單段限制為三列

構(gòu)建導(dǎo)航欄

導(dǎo)航欄的標(biāo)記很簡單。為了演示的目的，我將使用兩個(gè)類 (navbar 和 menu) 來處理所有內(nèi)容。此處的 CSS 將排除與本教程無關(guān)的任何樣式。

<nav class="navbar">
  <ul class="menu">
    <li><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

navbar 類負(fù)責(zé)將我們的導(dǎo)航欄居中在可用空間中，但我將重點(diǎn)介紹 menu 類，我將在其中使用 Flexbox。

我希望我的導(dǎo)航項(xiàng)目水平排列。此外，我希望每個(gè)項(xiàng)目間距相等，如果空間不足，則按需縮小。

首先，我需要在 .menu 元素上建立一個(gè) Flex 格式化上下文，我將使用 display: flex 來實(shí)現(xiàn)?，F(xiàn)在，.menu 元素（即 Flex 容器）的所有直接子元素都將成為 Flex 項(xiàng)目。

接下來，我希望菜單項(xiàng)目寬度相等。我添加了 flex: 1 使它們以相等的寬度均勻增長。以下是代碼：

<nav class="navbar">
  <ul class="menu">
    <li><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

查看代碼，您可能想知道為什麼我對所有 Flex 項(xiàng)目（.navbar .menu li）重複使用 display: flex。

在演示中，當(dāng)您將鼠標(biāo)懸停在菜單項(xiàng)目上時(shí)，其背景顏色會發(fā)生變化。如果我不將Flex 項(xiàng)目的display 屬性設(shè)置為flex，則只有l(wèi)i 元素將具有相等的寬度，而其內(nèi)部內(nèi)容則不會（即，某些突出顯示的部分是可點(diǎn)擊的，而其他部分則不可點(diǎn)擊）。

為了使內(nèi)容擴(kuò)展到其父元素的整個(gè)寬度，我將 Flex 項(xiàng)目本身也變成了 Flex 容器。有了這個(gè)設(shè)置，我就可以使每個(gè)嵌套的 a 元素的寬度與其父元素一樣寬（使用 flex: 1），從而使整個(gè)突出顯示的區(qū)域都可點(diǎn)擊。

或者，我也可以在不將li 元素設(shè)為Flex 容器的情況下實(shí)現(xiàn)這一點(diǎn)，但我必須使用三個(gè)附加屬性（display: inline-block、width: 100%、box-sizing: border-box），我更願意避免這種情況。

此演示顯示了目前為止所做的工作。

只需五個(gè) CSS Flexbox 屬性，導(dǎo)航欄就準(zhǔn)備好了。如您所見，這是一個(gè)簡潔的解決方案。

在下一節(jié)中，我將向您展示如何構(gòu)建巨型導(dǎo)航的一個(gè)部分。

構(gòu)建單個(gè)下拉菜單段

以下是將用於構(gòu)建單個(gè)下拉菜單段的標(biāo)記，該段將擴(kuò)展到多個(gè)段。 container__list 項(xiàng)目將被複製以創(chuàng)建其他段。

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

container 是 Flex 容器，每個(gè)直接子元素（即 container__list）都是一個(gè) Flex 項(xiàng)目。每個(gè) container__list 都有多個(gè)導(dǎo)航項(xiàng)目，每個(gè)項(xiàng)目都由 container__listItem 包裹。我已經(jīng)將內(nèi)容包裝在一個(gè) div 中，稍後我將回到它。

以下是 CSS：

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

請注意，我在 container__list 上使用了 flex-wrap 屬性，但我沒有將其用於導(dǎo)航欄本身。如前所述，我不希望導(dǎo)航欄項(xiàng)目在空間不足時(shí)換行。相反，當(dāng)可用的水平空間減少時(shí)，它們會均勻縮小。

但是，對於 container__list 項(xiàng)目，要求正好相反。我希望我的列表項(xiàng)使用 25% 的空間，從而每行最多容納四個(gè)項(xiàng)目，我可以使用 flex-wrap: wrap 來實(shí)現(xiàn)。

我還將 flex-grow 設(shè)置為 0。這很有用，因?yàn)樗梢苑乐股凫端膫€(gè)的項(xiàng)目平均分佈。通過將其設(shè)置為 0，我強(qiáng)制項(xiàng)目保持 25% 的空間。

現(xiàn)在，包裝在 div 中的內(nèi)容呢？我想處理一個(gè)您可能希望防止內(nèi)容溢出的情況。當(dāng)您的內(nèi)容直接位於 Flex 子元素（即 container__listItem）內(nèi)時(shí)，這非常簡單。我可以使用以下代碼將剪切文本替換為省略號（“…”）。

<nav class="navbar">
  <ul class="menu">
    <li><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

但是，在本例中，我將內(nèi)容放在一個(gè) div 中，該 div 由 container__listItem 包裹。因此，上述解決方案將不起作用。文章 Flexbox 和截?cái)辔谋咎峁┝艘环N解決方案。在下面的代碼中，每個(gè)聲明塊中“更新”註釋下面的行是處理此問題的行：

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

將單個(gè)下拉菜單段限制為三列

在這個(gè)階段，大部分工作已經(jīng)完成了。對於本節(jié)的剩餘部分，我將添加另一個(gè)下拉菜單段，我將強(qiáng)制將其限制為三列項(xiàng)目。

如前所述，我將復(fù)制 container__list 兩次，並將其用於名為“電器”的新下拉菜單段。這是為了演示目的。在實(shí)際示例中，您可能通過 JavaScript 或使用後端語言生成列表。

我將添加一個(gè) has-multi 類來調(diào)整用戶界面。使用此類，我需要覆蓋一些屬性。

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

在這裡，我將 flex-basis 設(shè)置為 33.333%，因?yàn)槲蚁Ｍ谌萜髦酗@示三個(gè)部分。我只更改了 flex-basis，但其他兩個(gè)屬性 flex-grow 和 flex-shrink 已經(jīng)從單節(jié)代碼繼承。這讓我在 container__list 少於三個(gè)時(shí)具有靈活性。如果只有兩個(gè)列表，則 container__list 項(xiàng)目將增長並在它們之間分配空間。也就是說，每個(gè)項(xiàng)目將佔(zhàn)據(jù)總寬度的 50%。

請注意，.container__listItem 設(shè)置為 flex-basis: 100%，這確保了 container__list 中只有一列。我可以使用 50% 來允許每個(gè)部分有兩列。

關(guān)於巨型菜單可用性的幾點(diǎn)說明

我已經(jīng)選擇巨型菜單作為我的示例，而沒有過多考慮其可用性。在使用此類功能之前，我已經(jīng)提供了一些討論其優(yōu)缺點(diǎn)的資源。

在我看來，巨型菜單導(dǎo)航對於顯示所有選項(xiàng)非常有用，並且這種導(dǎo)航樣式可以有效地用於電子商務(wù)網(wǎng)站。我喜歡英特爾的導(dǎo)航。

• 巨型菜單的可用性優(yōu)勢和劣勢（巨型菜單第 1 部分）
• 巨型菜單非常適合網(wǎng)站導(dǎo)航
• 巨型下拉菜單

結(jié)語

需要注意的一點(diǎn)是，本教程中的最終巨型菜單並非完全響應(yīng)式。主菜單欄會在較小的屏幕上顯示，但巨型菜單將不可用，只有頂級鏈接可用。出於本教程的目的，這應(yīng)該就足夠了。如果您願意，可以隨意複製演示並改進(jìn)它。

巨型下拉菜單導(dǎo)航系統(tǒng)是演示 Flexbox 的強(qiáng)大和簡潔性的不錯(cuò)方法，我希望我已經(jīng)在本教程中傳達(dá)了這一點(diǎn)。如您所見，F(xiàn)lexbox 不僅用於居中內(nèi)容。

如果您使用不同的基於 Flexbox 的技術(shù)來構(gòu)建巨型菜單系統(tǒng)，請隨時(shí)在評論中告訴我們。

更新：我已經(jīng)構(gòu)建了這些巨型菜單的響應(yīng)式移動友好版本，您可以在此 CodePen 演示中找到它。

使用 Flexbox 構(gòu)建巨型菜單的常見問題解答 (FAQ)

如何使用 Flexbox 使我的巨型菜單具有響應(yīng)性？

使用 Flexbox 使巨型菜單具有響應(yīng)性非常簡單。您可以使用媒體查詢根據(jù)屏幕大小調(diào)整菜單的佈局。例如，您可以在較小的屏幕上垂直堆疊菜單項(xiàng)，並在較大的屏幕上水平顯示它們。您還可以使用“flex-wrap”屬性，以便在必要時(shí)允許菜單項(xiàng)換行到多行。請記住在不同的設(shè)備上測試您的菜單，以確保它在所有屏幕大小上看起來都很好並且功能正常。

我可以使用 Flexbox 創(chuàng)建多級巨型菜單嗎？

是的，您可以使用 Flexbox 創(chuàng)建多級巨型菜單。您可以將 Flex 容器彼此嵌套以創(chuàng)建多級導(dǎo)航?？梢允褂?CSS 和 JavaScript 顯示或隱藏每個(gè)級別。這允許您創(chuàng)建仍然易於導(dǎo)航和理解的複雜導(dǎo)航結(jié)構(gòu)。

如何在我的 Flexbox 巨型菜單中添加動畫？

您可以使用 CSS 過渡和轉(zhuǎn)換向 Flexbox 巨型菜單添加動畫。例如，您可以使用過渡來平滑地動畫化子菜單的打開和關(guān)閉。您還可以使用轉(zhuǎn)換來動畫化菜單項(xiàng)的移動。請記住保持動畫的微妙性和一致性，以免混淆或分散用戶的注意力。

如何提高 Flexbox 巨型菜單的可訪問性？

提高 Flexbox 巨型菜單的可訪問性涉及幾個(gè)步驟。首先，確保您的菜單可通過鍵盤導(dǎo)航。這意味著用戶應(yīng)該能夠使用 Tab 鍵和箭頭鍵在菜單中導(dǎo)航。其次，使用 ARIA 角色和屬性向輔助技術(shù)提供有關(guān)菜單的附加信息。第三，確保您的菜單具有足夠的對比度並且易於閱讀。

我可以使用 Flexbox 創(chuàng)建粘性巨型菜單嗎？

是的，您可以使用 Flexbox 創(chuàng)建粘性巨型菜單。您可以使用“position: sticky”CSS 屬性使菜單在用戶滾動時(shí)粘貼到頁面頂部。這確保了菜單始終可見且可訪問，即使在長頁面上也是如此。

如何在我的 Flexbox 巨型菜單中添加圖標(biāo)？

您可以使用圖標(biāo)字體或 SVG 向 Flexbox 巨型菜單添加圖標(biāo)。您可以使用“flex”屬性來控製圖標(biāo)的大小和間距。您還可以使用 CSS 來更改圖標(biāo)的顏色和懸停效果。

如何在我的 Flexbox 巨型菜單中添加搜索欄？

您可以通過創(chuàng)建一個(gè)包含帶有輸入字段和提交按鈕的表單的 Flex 項(xiàng)目來向 Flexbox 巨型菜單添加搜索欄。您可以使用“flex”屬性來控制搜索欄的大小和位置。您還可以使用 CSS 來設(shè)置搜索欄的樣式以匹配菜單的其餘部分。

如何在我的 Flexbox 巨型菜單中添加下拉菜單？

您可以通過創(chuàng)建嵌套的 Flex 容器來向 Flexbox 巨型菜單添加下拉菜單。您可以使用 CSS 默認(rèn)情況下隱藏下拉菜單，並在用戶將鼠標(biāo)懸停在父菜單項(xiàng)上時(shí)顯示它們。您還可以使用 JavaScript 向下拉菜單添加額外的交互性，例如在用戶單擊下拉菜單外部時(shí)關(guān)閉它們。

如何在我的 Flexbox 巨型菜單中添加移動菜單切換？

您可以通過創(chuàng)建一個(gè)切換菜單顯示的按鈕來向 Flexbox 巨型菜單添加移動菜單切換。您可以使用媒體查詢在較大的屏幕上隱藏切換，並在較小的屏幕上顯示它。您還可以使用 JavaScript 在單擊按鈕時(shí)切換菜單的“display”屬性。

如何優(yōu)化 Flexbox 巨型菜單的性能？

優(yōu)化 Flexbox 巨型菜單的性能涉及幾個(gè)步驟。首先，確保您的 CSS 和 JavaScript 已縮小和壓縮以減小其文件大小。其次，使用 CSS 過渡和轉(zhuǎn)換進(jìn)行動畫而不是 JavaScript，因?yàn)樗鼈冃阅芨摺５谌?，使用媒體查詢根據(jù)屏幕大小加載不同的樣式和腳本，從而減少加載不必要的代碼量。

以上是用Flexbox構(gòu)建大型菜單的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！