使用 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 导航结构：
然后用 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 让导航结构灵活，再结合媒体查询控制显示，就能做出流畅响应式的导航栏。关键点是结构清晰、弹性合理、移动端有入口。不复杂但容易忽略细节。
