当前位置：首页 > 文章列表 > 文章 > 前端 > Flexbox菜单栏响应式折叠方法

Flexbox菜单栏响应式折叠方法

2026-03-14 16:06:25 0浏览收藏

本文详解了如何仅用纯CSS的Flexbox特性（特别是`flex-wrap: wrap`、`flex`属性与媒体查询）实现简洁高效的响应式菜单栏折叠效果：通过设置菜单项最小宽度触发自动换行，再在小屏幕下切换为垂直堆叠布局，配合合理的间距、对齐和断点控制，无需JavaScript即可让导航栏在不同设备上自然适配——既避免溢出和滚动条，又保持结构清晰与维护性，是现代前端开发中轻量又实用的布局技巧。

如何在CSS中使用Flexbox制作菜单栏响应式折叠_flex-wrap wrap实现换行

使用 Flexbox 制作响应式菜单栏时，flex-wrap: wrap 是实现自动换行的关键属性。当屏幕变窄时，菜单项会自动从一行排列变为多行显示，从而避免溢出或出现横向滚动条。结合媒体查询和合理的布局设置，可以轻松实现折叠效果。

1. 基础结构：HTML 菜单布局

先构建一个简单的导航菜单结构：

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%; /* 每项占满一行 */
  }
}