使用CSS Flexbox可高效创建响应式导航菜单，通过display: flex实现横向布局，justify-content与align-items控制对齐，结合媒体查询适配移动端，支持Logo与右侧按钮布局，结构清晰且易于维护。
用CSS Flexbox制作导航菜单简单又高效，能快速实现响应式布局。Flex布局让菜单项自动对齐、等分布局、垂直居中变得非常容易，特别适合现代网页设计。
基本HTML结构
先搭建一个简洁的导航结构，使用nav标签和无序列表：
<nav class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
使用Flex布局排列菜单项
通过display: flex让列表横向排列，并控制间距和对齐方式：
.navbar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
justify-content: space-around; /* 菜单项均匀分布 */
align-items: center; /* 垂直居中 */
height: 60px;
}
<p>.navbar a {
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
padding: 10px 15px;
}</p><p>.navbar a:hover {
background-color: #555;
border-radius: 4px;
}</p>说明：-
justify-content: space-around让每个菜单项之间留出均匀空隙 -
align-items: center确保文字在导航栏中垂直居中 - 去除默认的
list-style和链接下划线，使样式更干净
适配移动端（响应式）
当屏幕变小时，可以切换为竖向堆叠布局，适合手机查看：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
height: auto;
}
<p>.navbar a {
padding: 15px;
text-align: center;
}
}</p>提示：-
flex-direction: column将菜单从横排变为竖排 - 配合媒体查询，实现基础的移动适配
- 可进一步添加汉堡按钮（需JavaScript）来控制展开收起
扩展：添加Logo与右侧菜单项
实际项目中，导航常包含Logo和右侧登录/语言等按钮。Flex的margin技巧可以轻松实现：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 0 20px;
height: 60px;
}
<p>.logo {
color: white;
font-size: 1.5em;
font-weight: bold;
}</p><p>.nav-right {
display: flex;
gap: 10px;
}</p>对应HTML：
<nav class="navbar">
<div class="logo">LOGO</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
<div class="nav-right">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</nav>
基本上就这些。Flexbox让导航菜单布局变得直观且维护方便，不复杂但容易忽略细节。掌握这几个模式，就能应对大多数网站导航需求。
