使用 Flexbox 可轻松实现响应式导航菜单。首先构建无序列表作为菜单结构，通过 display: flex 将 nav ul 设为弹性容器，消除默认样式；接着设置 justify-content 与 align-items 实现水平分布与垂直居中，并添加内边距和悬停效果；最后在移动端使用 @media (max-width: 768px) 将 flex-direction 改为 column，使菜单垂直排列，适配小屏幕。
使用 CSS 实现弹性导航菜单布局，核心是利用 Flexbox（弹性盒子） 布局模型，它能轻松实现菜单项的自适应排列、对齐和空间分配。下面一步步说明如何构建一个响应式、美观且结构清晰的弹性导航菜单。
1. 基础 HTML 结构
导航菜单通常使用无序列表 <ul> 和链接 <a> 构建，语义清晰且利于 SEO。
2. 使用 Flexbox 设置横向布局
通过 display: flex 将导航容器设为弹性容器，使菜单项自动横向排列，并支持灵活的空间分配。
nav ul { display: flex; list-style: none; margin: 0; padding: 0; }这会让所有 <li> 项目在同一行显示，消除默认列表样式。
立即学习“前端免费学习笔记（深入）”；
3. 控制菜单项的对齐与间距
利用 Flexbox 的对齐属性，可以轻松控制菜单的外观：
nav ul { justify-content: space-between; /* 两端对齐，平均分配空白 */ align-items: center; /* 垂直居中对齐 */ background-color: #333; padding: 10px; }
nav a { color: white; text-decoration: none; padding: 10px 15px; border-radius: 4px; }
nav a:hover { background-color: #555; }
justify-content 可根据需求调整：
- flex-start：左对齐
- center：居中对齐
- space-around：均分空白，两侧也有间隙
- space-evenly：完全均匀分布
4. 响应式适配移动端
在小屏幕上，可将菜单切换为垂直堆叠或隐藏式菜单（如汉堡菜单），这里先展示基础响应式处理：
@media (max-width: 768px) { nav ul { flex-direction: column; /* 垂直排列 */ }nav a { text-align: center; } }
这样在窄屏下，菜单项会从上到下排列，更易点击。
若需要更高级的响应式效果（如折叠菜单），可结合 JavaScript 或伪类进一步扩展。
基本上就这些。通过 Flexbox，你只需几行 CSS 就能实现一个现代、自适应的导航菜单，无需浮动或定位，代码简洁且维护方便。
