使用Flexbox实现响应式菜单需设置flex-wrap:wrap，使菜单项在屏幕变窄时自动换行。1. HTML结构包含导航容器、logo和无序菜单列表；2. CSS中为.menu启用display:flex和flex-wrap:wrap，并通过flex:1 1 120px控制最小宽度换行；3. 在max-width:768px媒体查询中，设置flex-direction:column使菜单垂直堆叠；4. 关键点包括合理使用gap间距、justify-content布局对齐及响应式断点控制，仅用CSS即可实现无需JavaScript的折叠效果。
使用 Flexbox 制作响应式菜单栏时，flex-wrap: wrap 是实现自动换行的关键属性。当屏幕变窄时，菜单项会自动从一行排列变为多行显示，从而避免溢出或出现横向滚动条。结合媒体查询和合理的布局设置，可以轻松实现折叠效果。
1. 基础结构：HTML 菜单布局
先构建一个简单的导航菜单结构：
<nav class="navbar"><div class="logo">Logo</div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
2. 使用 Flexbox 和 flex-wrap 实现换行
为菜单容器启用 Flexbox 并允许换行：
.navbar {display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
width: 60%;
flex-wrap: wrap; / 允许换行 /
gap: 1rem;
}
.menu li {
flex: 1 1 120px; / 可伸缩，最小宽度约120px后换行 /
}
.menu a {
text-decoration: none;
color: #333;
text-align: center;
padding: 0.5rem;
display: block;
}
3. 添加响应式断点（可选折叠）
在更小屏幕上，让菜单垂直堆叠，形成类似“折叠”效果：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {.navbar {
flex-direction: column;
}
.menu {
width: 100%;
justify-content: center;
}
.menu li {
flex: 1 1 100%; /* 每项占满一行 */
}
}
4. 关键点说明
实现响应式换行的核心在于：
- flex-wrap: wrap：允许子元素在空间不足时换行
- flex: 1 1 120px：设置菜单项的最小宽度，触发换行
- gap：提供项之间的间距，避免拥挤
- 配合 media query 控制不同屏幕下的布局方向
基本上就这些。不需要 JavaScript，仅靠 CSS 的 Flexbox 和 flex-wrap 就能让菜单在小屏幕上自然换行或堆叠，达到视觉上的“折叠”效果。关键在于合理设置弹性尺寸与断点。不复杂但容易忽略细节。
