使用CSS Flexbox可高效创建响应式导航菜单，通过display: flex实现横向布局，justify-content与align-items控制对齐，结合媒体查询适配移动端，支持Logo与右侧按钮布局，结构清晰且易于维护。
用CSS Flexbox制作导航菜单简单又高效，能快速实现响应式布局。Flex布局让菜单项自动对齐、等分布局、垂直居中变得非常容易，特别适合现代网页设计。
基本HTML结构
先搭建一个简洁的导航结构，使用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;}.navbar a {text-decoration: none;color: white;font-family: Arial, sans-serif;padding: 10px 15px;}
.navbar a:hover {background-color: #555;border-radius: 4px;}
说明：justify-content: space-around 让每个菜单项之间留出均匀空隙align-items: center 确保文字在导航栏中垂直居中去除默认的list-style和链接下划线，使样式更干净
适配移动端（响应式）
当屏幕变小时，可以切换为竖向堆叠布局，适合手机查看：
立即学习“前端免费学习笔记（深入）”；
Cowriter
AI 作家，帮助加速和激发你的创意写作
107 查看详情
@media (max-width: 768px) { .navbar ul { flex-direction: column; height: auto; }.navbar a {padding: 15px;text-align: center;}}
提示：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;}.logo {color: white;font-size: 1.5em;font-weight: bold;}
.nav-right {display: flex;gap: 10px;}
对应HTML：
基本上就这些。Flexbox让导航菜单布局变得直观且维护方便，不复杂但容易忽略细节。掌握这几个模式，就能应对大多数网站导航需求。
以上就是如何使用CSS Flexbox制作导航菜单_Flex布局实战案例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/981226.html
微信扫一扫 
支付宝扫一扫 
