核心要點

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

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

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

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

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

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

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

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

本教程分為三個部分：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下是將用於構(gòu)建單個下拉菜單段的標記，該段將擴展到多個段。 container__list 項目將被複製以創(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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

container 是 Flex 容器，每個直接子元素（即 container__list）都是一個 Flex 項目。每個 container__list 都有多個導(dǎo)航項目，每個項目都由 container__listItem 包裹。我已經(jīng)將內(nèi)容包裝在一個 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)航欄項目在空間不足時換行。相反，當可用的水平空間減少時，它們會均勻縮小。

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

我還將 flex-grow 設(shè)置為 0。這很有用，因為它可以防止少於四個的項目平均分佈。通過將其設(shè)置為 0，我強制項目保持 25% 的空間。

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

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

但是，在本例中，我將內(nèi)容放在一個 div 中，該 div 由 container__listItem 包裹。因此，上述解決方案將不起作用。文章 Flexbox 和截斷文本提供了一種解決方案。在下面的代碼中，每個聲明塊中“更新”註釋下面的行是處理此問題的行：

.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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

將單個下拉菜單段限制為三列

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

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

我將添加一個 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%，因為我希望在容器中顯示三個部分。我只更改了 flex-basis，但其他兩個屬性 flex-grow 和 flex-shrink 已經(jīng)從單節(jié)代碼繼承。這讓我在 container__list 少於三個時具有靈活性。如果只有兩個列表，則 container__list 項目將增長並在它們之間分配空間。也就是說，每個項目將佔據(jù)總寬度的 50%。

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

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

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

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

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

結(jié)語

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何在我的 Flexbox 巨型菜單中添加圖標？

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

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

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

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

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

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

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

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

優(yōu)化 Flexbox 巨型菜單的性能涉及幾個步驟。首先，確保您的 CSS 和 JavaScript 已縮小和壓縮以減小其文件大小。其次，使用 CSS 過渡和轉(zhuǎn)換進行動畫而不是 JavaScript，因為它們性能更高。第三，使用媒體查詢根據(jù)屏幕大小加載不同的樣式和腳本，從而減少加載不必要的代碼量。

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