响应式导航菜单需要适配桌面端、平板和手机等不同屏幕尺寸，使用css的flexbox弹性布局可以轻松实现菜单项的自动排列、间距调整和换行控制，不需要复杂的浮动或定位计算。
基础HTML结构搭建
首先构建导航菜单的基础HTML结构，包含logo区域和导航项列表，整体放在导航容器内：
<nav class="nav-container">
<div class="nav-logo">网站LOGO</div>
<ul class="nav-list">
<li class="nav-item"><a href="#">首页</a></li>
<li class="nav-item"><a href="#">产品介绍</a></li>
<li class="nav-item"><a href="#">解决方案</a></li>
<li class="nav-item"><a href="#">关于我们</a></li>
<li class="nav-item"><a href="#">联系我们</a></li>
</ul>
</nav>
核心弹性布局样式配置
给导航容器添加flexbox弹性布局属性，让内部元素自动排列，同时设置基础的内边距和样式：
.nav-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
justify-content: space-between; /* 两端对齐，logo在左菜单在右 */
padding: 0 20px;
height: 60px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-list {
display: flex; /* 导航项使用弹性布局横向排列 */
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
margin-left: 30px;
}
.nav-item a {
text-decoration: none;
color: #333333;
font-size: 16px;
padding: 8px 0;
}
.nav-item a:hover {
color: #1890ff;
}
响应式适配实现
通过媒体查询设置小屏幕下的适配规则，当屏幕宽度小于768px时，让导航项换行或者调整为垂直排列，同时可以适配汉堡菜单的交互：
/* 平板及以下设备适配 */
@media screen and (max-width: 768px) {
.nav-container {
flex-wrap: wrap; /* 允许子元素换行 */
height: auto;
padding: 15px 20px;
}
.nav-list {
width: 100%; /* 导航列表占满整行 */
flex-direction: column; /* 垂直排列导航项 */
margin-top: 15px;
display: none; /* 默认隐藏，可通过js控制显示 */
}
.nav-item {
margin-left: 0;
margin-bottom: 10px;
text-align: center;
}
}
/* 小屏幕下显示汉堡按钮的样式示例 */
.nav-toggle {
display: none;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.nav-toggle {
display: block;
}
}
常见问题说明
弹性布局下间距控制
如果需要均匀分配导航项的间距，可以给nav-list设置justify-content: space-around属性，让所有导航项均匀分布在一行内，不需要手动计算每个项的margin值。
换行后的对齐问题
当导航项过多需要换行时，可以设置flex-wrap: wrap和align-content: flex-start，保证换行后的导航项从顶部开始排列，不会出现垂直方向的多余间距。
使用弹性布局实现响应式导航菜单的核心是利用flexbox的自动排列特性，配合媒体查询调整不同屏幕尺寸下的布局规则，相比传统浮动布局代码更简洁，适配效果更稳定。