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

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

P粉602998670

发布： 2025-12-01 09:27:06

原创

537人浏览过

使用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的折叠效果。

如何在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. 添加响应式断点（可选折叠）

在更小屏幕上，让菜单垂直堆叠，形成类似“折叠”效果：

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

313

查看详情

立即学习“前端免费学习笔记（深入）”；

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
  .menu {
    width: 100%;
    justify-content: center;
  }
  .menu li {
    flex: 1 1 100%; /* 每项占满一行 */
  }
}