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