答案：通过align-items控制垂直对齐，justify-content控制水平分布，结合gap间距与统一图标尺寸，可实现导航栏图标与文字的完美对齐。
在使用 Flexbox 布局创建导航栏时，图标与文字的对齐常常让人困惑。其实只要掌握 align-items 和 justify-content 的作用，再结合一些细节处理，就能轻松实现视觉上完美的对齐效果。
理解 Flex 容器中的对齐方向
Flexbox 是基于主轴和交叉轴的布局模型。默认情况下，flex-direction: row 时：
- justify-content 控制主轴（水平）方向的对齐
- align-items 控制交叉轴（垂直）方向的对齐
要让图标和文字在导航项中垂直居中，关键是设置 align-items: center。
基础结构与样式设置
假设你的导航结构如下：
立即学习“前端免费学习笔记（深入）”；
<nav class="navbar"><div class="nav-item">
<img src="icon-home.svg" alt="首页" class="nav-icon">
<span>首页</span>
</div>
<div class="nav-item">
<img src="icon-profile.svg" alt="我的" class="nav-icon">
<span>我的</span>
</div>
</nav>
对应的 CSS 样式：
display: flex;
gap: 20px;
padding: 12px;
}
.nav-item {
display: flex;
align-items: center;
gap: 6px;
}
这里 align-items: center 确保图标和文字在垂直方向居中对齐，gap 提供间距，更现代且简洁。
处理不同尺寸图标的对齐问题
如果图标大小不一或来自不同来源，可能出现错位。解决方法：
- 统一设置图标尺寸：.nav-icon { width: 20px; height: 20px; }
- 使用 object-fit: contain 避免拉伸
- 添加 vertical-align: middle 兼容 inline 元素（虽然 flex 下影响较小）
例如：
.nav-icon {width: 20px;
height: 20px;
object-fit: contain;
}
响应式与文字换行情况下的处理
当导航项宽度受限，文字可能换行。此时仍保持图标与第一行文字对齐：
- 保持 align-items: center
- 避免设置固定高度
- 使用 align-items: flex-start 可让图标顶部对齐（按设计需求选择）
若希望图标始终与文字基线对齐，可尝试：
.nav-item {align-items: baseline;
gap: 4px;
}
.nav-icon {
margin-bottom: 2px; /* 微调图标位置 */
}
基本上就这些。核心是理解 align-items 控制垂直对齐，justify-content 控制水平分布。搭配 gap 和统一图标尺寸，就能做出干净整齐的 Flexbox 导航栏。不复杂但容易忽略细节。
