核心要點

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

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

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

在本文中，我將使用此布局模型來構建一個巨型導航菜單，在此過程中，您將看到使用 Flexbox 構建和擴展 UI 組件是多么簡單。

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

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

我們將構建什么？

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

本教程分為三個部分：

1. 構建導航欄：使用 Flexbox 為我們虛構的電子商務平臺構建一個簡單的導航欄
2. 構建單個下拉菜單段
3. 將單個下拉菜單段限制為三列

構建導航欄

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

<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 類負責將我們的導航欄居中在可用空間中，但我將重點介紹 menu 類，我將在其中使用 Flexbox。

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

首先，我需要在 .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 屬性設置為 flex，則只有 li 元素將具有相等的寬度，而其內(nèi)部內(nèi)容則不會（即，某些突出顯示的部分是可點擊的，而其他部分則不可點擊）。

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

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

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

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

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

構建單個下拉菜單段

以下是將用于構建單個下拉菜單段的標記，該段將擴展到多個段。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 都有多個導航項目，每個項目都由 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 屬性，但我沒有將其用于導航欄本身。如前所述，我不希望導航欄項目在空間不足時換行。相反，當可用的水平空間減少時，它們會均勻縮小。

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

我還將 flex-grow 設置為 0。這很有用，因為它可以防止少于四個的項目平均分布。通過將其設置為 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é)的剩余部分，我將添加另一個下拉菜單段，我將強制將其限制為三列項目。

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

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

關于巨型菜單可用性的幾點說明

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

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

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

結(jié)語

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

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

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

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

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

如何使用 Flexbox 使我的巨型菜單具有響應性？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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