使用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让导航菜单布局变得直观且维护方便，不复杂但容易忽略细节。掌握这几个模式，就能应对大多数网站导航需求。