核心要点
如您所知，Flexbox 近期随着浏览器支持度的提高而备受关注。它允许开发者构建复杂的 UI，无需依赖多余的 CSS 和 JavaScript 技巧。
Flexbox 使用线性布局模型，允许我们水平或垂直布局内容，无需进行间距计算。Flex 布局对容器内的元素具有响应性，从而减少了媒体查询的需求。
在本文中，我将使用此布局模型来构建一个巨型导航菜单，在此过程中，您将看到使用 Flexbox 构建和扩展 UI 组件是多么简单。
我不会在这里详细讨论各个 Flexbox 属性，而是重点介绍这些功能的实际应用。有关 Flexbox 的基本介绍，请参考以下资源：
要了解我将向您展示如何构建的内容，请查看全屏 CodePen。
本教程分为三个部分：
导航栏的标记很简单。为了演示的目的，我将使用两个类 (navbar 和 menu) 来处理所有内容。此处的 CSS 将排除与本教程无关的任何样式。
<nav class="navbar">
<ul class="menu">
<li><a href="https://www.php.cn/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="https://www.php.cn/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: https://www.php.cn/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="https://www.php.cn/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: https://www.php.cn/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中文网其他相关文章！
