使用 Flexbox 和媒体查询可高效实现响应式导航。1. 用 Flexbox 创建水平导航栏，设置 flex-wrap: wrap 允许换行；2. 中等屏幕下导航项自动折行；3. 移动端通过 @media (max-width: 768px) 切换为垂直堆叠布局，隐藏 nav-links 并显示汉堡按钮；4. JavaScript 控制点击菜单切换 active 类，实现展开/收起。结合 display、flex-direction 与断点控制，适配多设备体验。
要实现一个响应式导航菜单，使用 Flexbox 布局结合 @media 查询是一种现代且高效的方式。通过 flex-wrap 控制换行，并在小屏幕上切换为堆叠布局或汉堡菜单，可以让导航在不同设备上都保持良好的用户体验。
1. 使用 Flexbox 构建基础导航结构
先用 Flexbox 创建水平排列的导航栏，支持自动换行（flex-wrap: wrap），确保内容在空间不足时能合理布局。
示例 HTML 结构：
CSS 基础样式：
立即学习“前端免费学习笔记（深入）”；
.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 1rem;}.nav-links {display: flex;list-style: none;margin: 0;padding: 0;}
.nav-links li a {color: white;text-decoration: none;padding: 0.5rem 1rem;}
.menu-toggle {display: none;font-size: 1.5rem;cursor: pointer;}
2. 添加 flex-wrap 支持多行布局
当屏幕变窄时，允许导航项换行显示，避免溢出：
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情
.nav-links { flex-wrap: wrap;}
这能让导航项在空间不足时自动折行，适合中等宽度设备（如平板）。
3. 使用媒体查询适配移动端
当屏幕进一步缩小（如手机），隐藏导航列表，显示汉堡按钮，并垂直堆叠菜单项。
@media (max-width: 768px) { .nav-links { flex-direction: column; display: none; /* 默认隐藏 */ width: 100%; }.nav-links.active {display: flex; / 激活时显示 /}
.menu-toggle {display: block; / 显示汉堡按钮 /}
.navbar {flex-direction: column;align-items: stretch;}
.logo {margin-bottom: 1rem;text-align: center;}}
4. 使用 JavaScript 切换菜单显示状态
添加简单脚本控制菜单展开/收起：
document.querySelector('.menu-toggle').addEventListener('click', function() { document.querySelector('.nav-links').classList.toggle('active');});
点击汉堡图标时，.nav-links 会切换 active 类，从而在移动端显示垂直菜单。
基本上就这些。通过 flex-wrap 和媒体查询的结合，你可以轻松构建一个既美观又实用的响应式导航菜单，适配桌面、平板和手机等多种设备。关键在于灵活运用 Flexbox 的布局能力与断点控制。不复杂但容易忽略细节，比如 flex-direction: column 和 display: none/block 的切换时机。
以上就是如何使用CSS实现Flex响应式导航菜单_wrap与媒体查询结合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/970367.html
微信扫一扫 
支付宝扫一扫 
