使用 flex 布局实现下拉菜单，先设置 .nav 为 display: flex 让菜单项水平排列，.nav-item 用 position: relative 定位，.dropdown-menu 设为 absolute 隐藏，hover 时显示，并通过 flex-direction: column 垂直排列选项；响应式场景下结合媒体查询将导航改为垂直堆叠，提升移动端体验与可访问性。
使用 Flex 布局实现下拉菜单，不仅能提升页面结构的清晰度，还能让响应式设计更简单。关键在于合理利用容器的弹性排列与子元素的空间分配，使菜单在不同屏幕尺寸下都保持良好的视觉效果和交互体验。
使用 Flex 布局构建基础导航栏
要实现下拉菜单，先从一个基于 Flex 的横向导航开始。将导航容器设为 display: flex，让菜单项水平排列，并自动填充可用空间。
- 设置 display: flex 使菜单项在同一行对齐
- 使用 justify-content: space-between 或 flex-grow 分配间距
- 给菜单项设置 position: relative，为下拉内容定位做准备
示例代码：
.nav {
display: flex;
background: #333;
}
.nav-item {
position: relative;
flex: 1;
text-align: center;
}
.nav-link {
color: white;
padding: 1rem;
text-decoration: none;
display: block;
}
实现下拉菜单的结构与显示控制
下拉内容通常隐藏，鼠标悬停时显示。结合 Flex 和定位，可轻松实现这一效果。
立即学习“前端免费学习笔记（深入）”；
- 下拉列表使用 position: absolute 脱离文档流，置于菜单项下方
- 父级 .nav-item 设为相对定位，确保下拉层正确对齐
- 下拉容器使用 display: flex 垂直排列选项，增强布局一致性
- 默认隐藏下拉层（display: none），:hover 时显示
示例代码：
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 200px;
background: #444;
flex-direction: column;
}
.dropdown-menu a {
padding: 0.8rem;
color: white;
text-decoration: none;
}
.nav-item:hover .dropdown-menu {
display: flex;
}
优化响应式与可访问性
Flex 布局的优势在移动端尤为明显。通过媒体查询调整主轴方向，可快速适配小屏设备。
- 在移动视图中，将 flex-direction 改为 column，垂直堆叠菜单项
- 使用 gap 属性统一菜单项间距，避免外边距混乱
- 添加键盘支持（如 focus-within）提升可访问性：.nav-item:focus-within .dropdown-menu 显示下拉
- 避免过度嵌套，保持 HTML 结构简洁
例如，在小屏幕上切换为垂直布局：
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
.dropdown-menu {
position: static; /* 取消绝对定位，自然流布局 */
display: none;
width: auto;
}
.nav-item:hover .dropdown-menu {
display: flex;
}
}
基本上就这些。Flex 布局让下拉菜单的结构更灵活，配合定位和状态伪类，能高效实现美观且实用的导航效果。关键是理解容器与项目的关系，以及如何用最少的代码达成最大兼容性。不复杂但容易忽略细节，比如 position 配合 flex 的层级控制，处理好了体验会明显提升。
