使用 Flexbox 可解决响应式导航栏中图标与文字的对齐问题。通过设置 display: flex、align-items: center 和 justify-content，确保不同屏幕尺寸下布局一致；结合媒体查询调整断点样式，统一图标尺寸并利用 gap 控制间距，实现视觉整齐与良好用户体验。
在响应式导航栏中，图标与文字的对齐常因屏幕尺寸变化而错位。使用 Flexbox 能高效解决这类布局问题，确保在不同设备上都保持视觉一致性和良好的用户体验。
理解 Flex 容器与对齐属性
要实现图标与文字的对齐，先将导航项设为 Flex 容器。通过 display: flex 激活弹性布局，再用对齐属性控制子元素位置。
- align-items：控制交叉轴对齐（垂直方向）
- justify-content：控制主轴对齐（水平方向）
- flex-direction：可调整主轴方向（默认为 row）
例如，让图标和文字在同一行居中对齐：
.container {display: flex;
align-items: center;
justify-content: flex-start;
}
图标与文字垂直居中对齐
常见问题是图标比文字高或低，尤其在使用 SVG 或字体图标时。设置 align-items: center 可自动对齐子元素的中线。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：
<div class="nav-item"><span class="icon">☰</span>
<span class="text">首页</span>
</div>
CSS 设置：
display: flex;
align-items: center;
gap: 8px; /* 图标与文字间距 */
}
响应式断点下的对齐调整
在小屏幕上，导航可能折叠为汉堡菜单。此时仍需保证图标与文字对齐。使用媒体查询动态调整布局。
例如，在移动端将导航项改为居中排列：
@media (max-width: 768px) {.nav-item {
justify-content: center;
}
.nav-item .text {
font-size: 14px;
}
}
也可隐藏文字仅保留图标，点击展开，此时对齐依然依赖 Flex 的居中能力。
处理不同图标尺寸的兼容性
若使用多种图标（如 Font Awesome 和自定义 SVG），尺寸不一会影响对齐。建议统一设置图标大小：
.icon {width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
配合 vertical-align: middle 防止内联元素错位，或始终使用 Flex 布局避免传统对齐问题。
基本上就这些。合理运用 Flex 的 align 和 justify 属性，结合响应式断点，能轻松实现导航栏图标与文字的精准对齐，无论屏幕如何变化都能保持整洁美观。
