flexbox 是实现横向导航栏最直接可控的方式，包含基础横向排列、等宽分布、居中带间隔、右侧功能按钮组合及响应式折叠五种方案。
如果您希望在网页中创建一个横向排列的导航栏，并利用现代 CSS 布局能力实现灵活、响应式的结构，则 Flexbox 是最直接且可控的方式。以下是实现横向导航栏的多种 Flexbox 方案：
一、基础 Flex 横向导航栏
通过将 <nav></nav> 或 <ul></ul> 容器设为 flex 容器，并设置主轴方向为水平，可使子项（如 <li> 或 <a></a>
2、为 <nav><ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul></nav> 添加 CSS：.nav 启用 Flexbox 布局。
3、添加 display: flex; 显式声明主轴为水平方向（默认值，可省略）。
立即学习“前端免费学习笔记（深入）”；
4、为每个 flex-direction: row; 设置 <li> 并移除默认内边距与外边距。
5、为 list-style: none; 添加 <a></a> 和 text-decoration: none; 以增强点击区域。
二、等宽分布导航项
当需要所有导航项在容器内均匀占据可用空间时，可结合 padding: 12px 20px; 实现等分效果。该方式不依赖固定像素宽度，适合动态内容或响应式设计。
1、保持容器 flex: 1 不变。
2、为每个 display: flex; 设置 <li>，使其按比例分配剩余空间。
3、为避免文字换行影响布局，添加 flex: 1; 到 white-space: nowrap; 元素。
4、若需首尾项对齐边缘不留空隙，可对第一个 <a></a> 设置 <li>，最后一个设置 margin-left: 0;（需配合 :first-child/:last-child 选择器）。
5、注意：若某导航项文本过长导致溢出，应配合 margin-right: 0; 与 overflow: hidden; 使用。
三、居中对齐并带间隔的导航栏
使用 text-overflow: ellipsis; 可将导航项整体水平居中；配合 justify-content: center; 属性可统一控制项间间距，替代传统 margin 方法，避免首尾额外空白问题。
1、在 gap 上设置 .nav。
2、添加 justify-content: center; 控制相邻导航项之间的间距。
3、确保父容器（如 gap: 24px;）宽度足够容纳所有项，否则可能触发换行。
4、为防止小屏幕下拥挤，可对 <nav></nav> 添加 .nav 并配合媒体查询调整 flex-wrap: wrap; 值。
5、关键提示：gap 属性在所有现代浏览器中已完全支持，无需前缀。
四、右侧悬浮功能按钮组合
在主导航项右侧单独放置登录、搜索等操作按钮时，可利用 gap 将后续元素推至容器末尾，实现“主菜单左对齐 + 功能按钮右对齐”的经典布局模式。
1、将功能按钮（如 margin-left: auto; 或 <button></button>）置于 <a></a> 外部，同级嵌套于 <ul></ul> 内。
2、为功能按钮容器（如 <nav></nav>）设置 <div class="actions">。
<p>3、对 <code>margin-left: auto; 内部也启用 .actions，并用 display: flex; 控制按钮间距。
4、为保持垂直居中，可在 gap 上添加 .nav。
5、重要：必须确保功能按钮不在 align-items: center; 内，否则 <ul></ul> 在 flex 项目上无效。
五、响应式折叠导航（含汉堡菜单）
在小屏幕上隐藏完整导航，仅显示汉堡图标，并通过 JavaScript 切换 margin-left: auto 显示状态。Flexbox 负责结构，媒体查询负责断点控制。
1、为 flex 添加类名 .nav，初始设为 nav--collapsed。
2、使用媒体查询，在视口宽度大于 768px 时恢复 display: none; 并移除 display: flex; 类。
3、添加 nav--collapsed 作为切换触发器。
4、JavaScript 监听点击事件，对 <button class="nav-toggle">☰</button> 切换 .nav 类。
5、必须为 .nav-toggle 添加 aria-expanded 和 aria-controls 属性以保障可访问性。
