使用 Flexbox 可轻松实现自适应顶部导航栏。通过 display: flex 设置容器，justify-content 控制间距，推荐 space-evenly 实现等距分布；结合 flex: 1 使导航项均匀填充，提升布局美观性；在小屏下通过媒体查询切换为 flex-direction: column 和 gap 实现垂直堆叠，确保响应式可用性。
在现代网页设计中，顶部导航栏需要在不同设备上保持良好的可读性和布局一致性。使用 Flexbox 可以轻松实现自适应导航栏，并智能调整导航项之间的间距。
使用 Flexbox 布局基础
将导航栏容器设置为 Flex 容器是实现自适应的第一步。通过 display: flex，可以让所有导航项在同一行内排列，并自动伸缩空间。
示例代码：
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
justify-content: space-between 会将第一个项目靠左、最后一个靠右，其余项目均匀分配中间空间。适合导航项数量固定且较少的情况。
等间距分布导航项
如果希望每个导航项之间的空白相等，可以使用 space-around 或 space-evenly。
立即学习“前端免费学习笔记（深入）”；
- space-around：每个项目两侧的间距相等，但首尾项目的外侧间距较小
- space-evenly：所有项目包括边缘在内的间距完全一致，视觉更平衡
移动端或响应式菜单中使用 space-evenly 能更好利用屏幕宽度。
结合 flex-grow 实现动态填充
当导航项内容长度不一时，可让所有项占据相同宽度，提升美观性。
.nav-item {
flex: 1;
text-align: center;
}
使用 flex: 1 表示每个项目平均分配剩余空间。即使内容长短不同，也能整齐对齐。
响应式断点下的适配处理
在小屏幕上，过多的导航项可能导致拥挤。可通过媒体查询切换布局。
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 0.5rem;
}
}
垂直堆叠配合 gap 属性，使小屏下导航更易点击。
基本上就这些。Flexbox 让顶部导航栏的自适应变得简单直观，合理选择对齐方式和伸缩行为，就能兼顾美观与实用性。
