核心要點
如您所知，Flexbox 近期隨著瀏覽器支持度的提高而備受關注。它允許開發者構建複雜的 UI，無需依賴多餘的 CSS 和 JavaScript 技巧。
Flexbox 使用線性佈局模型，允許我們水平或垂直佈局內容，無需進行間距計算。 Flex 佈局對容器內的元素具有響應性，從而減少了媒體查詢的需求。
在本文中，我將使用此佈局模型來構建一個巨型導航菜單，在此過程中，您將看到使用 Flexbox 構建和擴展 UI 組件是多麼簡單。
我不會在這裡詳細討論各個 Flexbox 屬性，而是重點介紹這些功能的實際應用。有關 Flexbox 的基本介紹，請參考以下資源：
要了解我將向您展示如何構建的內容，請查看全屏 CodePen。
本教程分為三個部分：
導航欄的標記很簡單。為了演示的目的，我將使用兩個類 (navbar 和 menu) 來處理所有內容。此處的 CSS 將排除與本教程無關的任何樣式。
<nav class="navbar">
<ul class="menu">
<li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
</ul>
</nav>navbar 類負責將我們的導航欄居中在可用空間中，但我將重點介紹 menu 類，我將在其中使用 Flexbox。
我希望我的導航項目水平排列。此外，我希望每個項目間距相等，如果空間不足，則按需縮小。
首先，我需要在 .menu 元素上建立一個 Flex 格式化上下文，我將使用 display: flex 來實現。現在，.menu 元素（即 Flex 容器）的所有直接子元素都將成為 Flex 項目。
接下來，我希望菜單項目寬度相等。我添加了 flex: 1 使它們以相等的寬度均勻增長。以下是代碼：
<nav class="navbar">
<ul class="menu">
<li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
</ul>
</nav>查看代碼，您可能想知道為什麼我對所有 Flex 項目（.navbar .menu li）重複使用 display: flex。
在演示中，當您將鼠標懸停在菜單項目上時，其背景顏色會發生變化。如果我不將Flex 項目的display 屬性設置為flex，則只有li 元素將具有相等的寬度，而其內部內容則不會（即，某些突出顯示的部分是可點擊的，而其他部分則不可點擊）。
為了使內容擴展到其父元素的整個寬度，我將 Flex 項目本身也變成了 Flex 容器。有了這個設置，我就可以使每個嵌套的 a 元素的寬度與其父元素一樣寬（使用 flex: 1），從而使整個突出顯示的區域都可點擊。
或者，我也可以在不將li 元素設為Flex 容器的情況下實現這一點，但我必須使用三個附加屬性（display: inline-block、width: 100%、box-sizing: border-box），我更願意避免這種情況。
此演示顯示了目前為止所做的工作。
只需五個 CSS Flexbox 屬性，導航欄就準備好了。如您所見，這是一個簡潔的解決方案。
在下一節中，我將向您展示如何構建巨型導航的一個部分。
以下是將用於構建單個下拉菜單段的標記，該段將擴展到多個段。 container__list 項目將被複製以創建其他段。
.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: //m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
padding: 20px;
}container 是 Flex 容器，每個直接子元素（即 container__list）都是一個 Flex 項目。每個 container__list 都有多個導航項目，每個項目都由 container__listItem 包裹。我已經將內容包裝在一個 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 來實現。
我還將 flex-grow 設置為 0。這很有用，因為它可以防止少於四個的項目平均分佈。通過將其設置為 0，我強制項目保持 25% 的空間。
現在，包裝在 div 中的內容呢？我想處理一個您可能希望防止內容溢出的情況。當您的內容直接位於 Flex 子元素（即 container__listItem）內時，這非常簡單。我可以使用以下代碼將剪切文本替換為省略號（“…”）。
<nav class="navbar">
<ul class="menu">
<li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
</ul>
</nav>但是，在本例中，我將內容放在一個 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: //m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
padding: 20px;
}在這個階段，大部分工作已經完成了。對於本節的剩餘部分，我將添加另一個下拉菜單段，我將強制將其限制為三列項目。
如前所述，我將復制 container__list 兩次，並將其用於名為“電器”的新下拉菜單段。這是為了演示目的。在實際示例中，您可能通過 JavaScript 或使用後端語言生成列表。
我將添加一個 has-multi 類來調整用戶界面。使用此類，我需要覆蓋一些屬性。
<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 已經從單節代碼繼承。這讓我在 container__list 少於三個時具有靈活性。如果只有兩個列表，則 container__list 項目將增長並在它們之間分配空間。也就是說，每個項目將佔據總寬度的 50%。
請注意，.container__listItem 設置為 flex-basis: 100%，這確保了 container__list 中只有一列。我可以使用 50% 來允許每個部分有兩列。
我已經選擇巨型菜單作為我的示例，而沒有過多考慮其可用性。在使用此類功能之前，我已經提供了一些討論其優缺點的資源。
在我看來，巨型菜單導航對於顯示所有選項非常有用，並且這種導航樣式可以有效地用於電子商務網站。我喜歡英特爾的導航。
需要注意的一點是，本教程中的最終巨型菜單並非完全響應式。主菜單欄會在較小的屏幕上顯示，但巨型菜單將不可用，只有頂級鏈接可用。出於本教程的目的，這應該就足夠了。如果您願意，可以隨意複製演示並改進它。
巨型下拉菜單導航系統是演示 Flexbox 的強大和簡潔性的不錯方法，我希望我已經在本教程中傳達了這一點。如您所見，Flexbox 不僅用於居中內容。
如果您使用不同的基於 Flexbox 的技術來構建巨型菜單系統，請隨時在評論中告訴我們。
更新：我已經構建了這些巨型菜單的響應式移動友好版本，您可以在此 CodePen 演示中找到它。
使用 Flexbox 使巨型菜單具有響應性非常簡單。您可以使用媒體查詢根據屏幕大小調整菜單的佈局。例如，您可以在較小的屏幕上垂直堆疊菜單項，並在較大的屏幕上水平顯示它們。您還可以使用“flex-wrap”屬性，以便在必要時允許菜單項換行到多行。請記住在不同的設備上測試您的菜單，以確保它在所有屏幕大小上看起來都很好並且功能正常。
是的，您可以使用 Flexbox 創建多級巨型菜單。您可以將 Flex 容器彼此嵌套以創建多級導航。可以使用 CSS 和 JavaScript 顯示或隱藏每個級別。這允許您創建仍然易於導航和理解的複雜導航結構。
您可以使用 CSS 過渡和轉換向 Flexbox 巨型菜單添加動畫。例如，您可以使用過渡來平滑地動畫化子菜單的打開和關閉。您還可以使用轉換來動畫化菜單項的移動。請記住保持動畫的微妙性和一致性，以免混淆或分散用戶的注意力。
提高 Flexbox 巨型菜單的可訪問性涉及幾個步驟。首先，確保您的菜單可通過鍵盤導航。這意味著用戶應該能夠使用 Tab 鍵和箭頭鍵在菜單中導航。其次，使用 ARIA 角色和屬性向輔助技術提供有關菜單的附加信息。第三，確保您的菜單具有足夠的對比度並且易於閱讀。
是的，您可以使用 Flexbox 創建粘性巨型菜單。您可以使用“position: sticky”CSS 屬性使菜單在用戶滾動時粘貼到頁面頂部。這確保了菜單始終可見且可訪問，即使在長頁面上也是如此。
您可以使用圖標字體或 SVG 向 Flexbox 巨型菜單添加圖標。您可以使用“flex”屬性來控製圖標的大小和間距。您還可以使用 CSS 來更改圖標的顏色和懸停效果。
您可以通過創建一個包含帶有輸入字段和提交按鈕的表單的 Flex 項目來向 Flexbox 巨型菜單添加搜索欄。您可以使用“flex”屬性來控制搜索欄的大小和位置。您還可以使用 CSS 來設置搜索欄的樣式以匹配菜單的其餘部分。
您可以通過創建嵌套的 Flex 容器來向 Flexbox 巨型菜單添加下拉菜單。您可以使用 CSS 默認情況下隱藏下拉菜單，並在用戶將鼠標懸停在父菜單項上時顯示它們。您還可以使用 JavaScript 向下拉菜單添加額外的交互性，例如在用戶單擊下拉菜單外部時關閉它們。
您可以通過創建一個切換菜單顯示的按鈕來向 Flexbox 巨型菜單添加移動菜單切換。您可以使用媒體查詢在較大的屏幕上隱藏切換，並在較小的屏幕上顯示它。您還可以使用 JavaScript 在單擊按鈕時切換菜單的“display”屬性。
優化 Flexbox 巨型菜單的性能涉及幾個步驟。首先，確保您的 CSS 和 JavaScript 已縮小和壓縮以減小其文件大小。其次，使用 CSS 過渡和轉換進行動畫而不是 JavaScript，因為它們性能更高。第三，使用媒體查詢根據屏幕大小加載不同的樣式和腳本，從而減少加載不必要的代碼量。
以上是用Flexbox構建大型菜單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
