使用 flexbox 构建响应式导航栏，核心是通过弹性布局实现大屏横向排列、小屏堆叠或隐藏。首先创建语义化 html 结构，包含 logo 和导航链接列表；然后利用 display: flex 设置 .navbar 水平分布、垂直居中，.nav-links 水平排列无列表符号，链接有内边距和白色文字。为适配移动端，添加隐藏的汉堡菜单按钮 .menu-toggle（含三道横线），通过 javaScript 切换 .nav-links 的 active 类控制显示。结合媒体查询：在屏幕宽度小于 768px 时，.menu-toggle 显示，.nav-links 垂直排列并默认隐藏，激活时以列式展开；在 992px 以下减小字体和间距；576px 以下将整个导航设为纵向布局，logo 在上、菜单在下，提升小屏操作体验。最终实现结构清晰、自动适配、交互友好的响应式导航。
用 css Flexbox 做响应式导航栏，核心是利用弹性布局的自动伸缩能力，配合媒体查询适配不同屏幕。关键是让导航项在大屏横向排列，在小屏堆叠或隐藏，同时保持结构清晰、交互友好。
使用 Flexbox 构建基础导航结构
先写一个语义清晰的 HTML 导航结构：
<nav class=”navbar”>
<div class=”logo”>Logo</div>
<ul class=”nav-links”>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>关于</a></li>
<li><a href=”#”>服务</a></li>
<li><a href=”#”>联系</a></li>
</ul>
</nav>
然后用 Flexbox 控制布局：
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #333; } .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; flex-direction: column; cursor: pointer; } .bar { width: 25px; height: 3px; background-color: white; margin: 3px 0; transition: 0.4s; }
给 .menu-toggle 加点击事件切换 .nav-links 的显示状态。js 示例：
document.querySelector('.menu-toggle').addEventListener('click', function() { document.querySelector('.nav-links').classlist.toggle('active'); });
配合 CSS 控制移动端显示：
@media (max-width: 768px) { .menu-toggle { display: flex; } .nav-links { display: none; flex-direction: column; width: 100%; } .nav-links.active { display: flex; } }
优化响应式断点和间距
根据设备调整布局细节。比如在中等屏幕微调间距：
@media (max-width: 992px) { .nav-links li a { padding: 0.5rem 0.75rem; font-size: 0.95rem; } } @media (max-width: 576px) { .navbar { flex-direction: column; text-align: center; } .logo { margin-bottom: 1rem; } }
这样在更小屏幕上，logo 和菜单垂直排列，更适合触控操作。
基本上就这些。Flexbox 让导航结构灵活，再结合媒体查询控制显示，就能做出流畅响应式的导航栏。关键点是结构清晰、弹性合理、移动端有入口。不复杂但容易忽略细节。