CSS Flexbox 实现多级菜单布局的技巧

在前端开发中，菜单是一个常见的 UI 组件，而多级菜单更是常见的设计方式。在实现多级菜单布局时，使用 CSS Flexbox 是一个非常好的选择，它能够简化布局过程，提高开发效率。本文将介绍如何使用 CSS Flexbox 实现多级菜单布局，并提供示例代码和指导意义。

什么是 CSS Flexbox

CSS Flexbox 是一个用于布局的 CSS 模块，它提供了一种灵活的方式来排列、对齐和分配空间。使用 Flexbox 可以轻松实现水平和垂直居中、等高布局、自适应布局等常见的布局需求。

使用 CSS Flexbox 实现多级菜单布局

在实现多级菜单布局时，我们可以将菜单视为一个树形结构，每个菜单项都是一个节点。为了方便起见，我们可以使用无序列表（<ul>）来表示菜单。下面是一个简单的多级菜单示例：

// www.javascriptcn.com code example
<ul class="menu">
  <li><a href="#">菜单项 1</a></li>
  <li><a href="#">菜单项 2</a>
    <ul>
      <li><a href="#">子菜单项 1</a></li>
      <li><a href="#">子菜单项 2</a></li>
      <li><a href="#">子菜单项 3</a>
        <ul>
          <li><a href="#">子子菜单项 1</a></li>
          <li><a href="#">子子菜单项 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">菜单项 3</a></li>
</ul>

在 CSS 中，我们可以使用 Flexbox 来实现多级菜单布局。首先，我们需要设置菜单项的样式，使其成为 Flexbox 容器：

.menu > li {
  display: flex;
  flex-direction: column;
}

这里使用了 > 选择器来选择一级菜单项，并将其设置为 flex 布局，并且设置了 flex-direction 为 column，使其成为垂直方向的 Flexbox 容器。

接下来，我们需要设置菜单项之间的对齐方式和间距：

.menu > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

这里使用了 justify-content 和 align-items 属性来分别设置菜单项的主轴和交叉轴上的对齐方式，使用了 gap 属性来设置菜单项之间的间距。

最后，我们需要设置子菜单的样式，使其成为绝对定位的 Flexbox 容器，并设置其在父菜单项中的位置：

// www.javascriptcn.com code example
.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

.menu li:hover > ul {
  display: flex;
  flex-direction: row;
}

这里使用了绝对定位来使子菜单脱离文档流，并使用 top 和 left 属性来设置其在父菜单项中的位置。同时，我们将子菜单的 display 属性设置为 none，使其默认不可见。当鼠标悬停在父菜单项上时，我们使用 :hover 伪类来将子菜单的 display 属性设置为 flex，使其可见，并设置其为横向 Flexbox 布局。

示例代码

下面是一个完整的多级菜单示例代码：

// www.javascriptcn.com code example
<ul class="menu">
  <li><a href="#">菜单项 1</a></li>
  <li><a href="#">菜单项 2</a>
    <ul>
      <li><a href="#">子菜单项 1</a></li>
      <li><a href="#">子菜单项 2</a></li>
      <li><a href="#">子菜单项 3</a>
        <ul>
          <li><a href="#">子子菜单项 1</a></li>
          <li><a href="#">子子菜单项 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">菜单项 3</a></li>
</ul>

// www.javascriptcn.com code example
.menu {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

.menu li:hover > ul {
  display: flex;
  flex-direction: row;
}

指导意义

使用 CSS Flexbox 实现多级菜单布局，可以使布局过程更加简单、灵活、高效。同时，使用无序列表来表示菜单，可以使 HTML 结构更加清晰、语义化，有助于 SEO。因此，我们在实现多级菜单布局时，可以使用本文介绍的技巧，提高开发效率，优化用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d17272a941bf7134312e14