在网页开发过程中，图标和文本的组合是非常常见的页面元素，比如导航栏的菜单项、按钮内的图标加文字、列表项的前置图标等。很多时候我们会遇到图标和文本无法对齐、间距调整麻烦的问题，用传统的浮动或者 inline-block 方案往往要写很多额外的样式，甚至要用到负边距这类 hack 方法，后期维护起来很麻烦。而 Flexbox 布局作为 CSS3 引入的弹性盒模型，天生就适合处理这类一维方向的元素对齐和间距问题，只需要简单的属性配置就能实现我们想要的效果。
Flexbox 核心对齐属性说明
要实现图标和文本的垂直对齐与间距控制，首先需要了解 Flexbox 的几个核心属性：
- display: flex：将容器设置为弹性盒，容器内的子元素会自动成为 flex 项目
- align-items：控制 flex 项目在交叉轴（默认是垂直方向）上的对齐方式，常用值有 center（居中）、flex-start（顶部对齐）、flex-end（底部对齐）
- justify-content：控制 flex 项目在主轴（默认是水平方向）上的分布方式，可用来调整整体内容的水平位置
- gap：设置 flex 项目之间的间距，不需要再用 margin 给每个项目单独设置间距，避免边缘多余间距的问题
基础场景：图标与文本垂直居中对齐
最常见的需求是图标和文本在垂直方向居中对齐，同时控制两者之间的间距，实现代码如下：
/* 容器样式 */
.icon-text-container {
display: flex;
align-items: center; /* 垂直方向居中对齐 */
gap: 8px; /* 图标和文本之间的间距 */
padding: 12px 16px;
background-color: #f5f5f5;
border-radius: 4px;
}
/* 图标样式，这里用伪元素模拟图标，实际项目可替换为 img 或 iconfont */
.icon-text-container .icon {
width: 16px;
height: 16px;
background-color: #337ab7;
border-radius: 2px;
}
/* 文本样式 */
.icon-text-container .text {
font-size: 14px;
color: #333;
}对应的 HTML 结构如下：
<div class="icon-text-container">
<span class="icon"></span>
<span class="text">这是图标旁边的文本</span>
</div>这里把容器设置为 flex 布局后，align-items: center 会让图标和文本在垂直方向居中对齐，gap: 8px 直接设置两个元素之间的间距，不需要给图标加 margin-right 或者给文本加 margin-left，避免了容器边缘出现多余间距的问题。
进阶场景：多行文本与图标的对齐
如果文本是多行的，默认的 align-items: center 会让图标和整个文本块的中间对齐，有时候我们需要图标和文本的第一行对齐，这时候可以调整 align-items 的值为 flex-start：
.icon-text-multi-container {
display: flex;
align-items: flex-start; /* 垂直方向顶部对齐，图标和文本第一行对齐 */
gap: 8px;
padding: 12px 16px;
background-color: #f5f5f5;
border-radius: 4px;
width: 200px; /* 限制宽度让文本换行 */
}
.icon-text-multi-container .icon {
width: 16px;
height: 16px;
background-color: #337ab7;
border-radius: 2px;
margin-top: 2px; /* 微调图标位置，适配字体基线 */
}
.icon-text-multi-container .text {
font-size: 14px;
color: #333;
line-height: 1.5;
}对应的 HTML 结构：
<div class="icon-text-multi-container">
<span class="icon"></span>
<span class="text">这是一段比较长的文本，会自动换行显示，图标会和第一行文本对齐</span>
</div>这里用 align-items: flex-start 让图标和文本顶部对齐，如果觉得图标位置偏高，可以给图标加一点 margin-top 做微调，适配不同字体的基线差异。
特殊场景：图标在文本右侧的对齐
有时候我们需要图标放在文本的右边，这时候不需要调整 HTML 结构，只需要给 flex 容器加 flex-direction: row-reverse 即可：
.icon-text-reverse-container {
display: flex;
align-items: center;
flex-direction: row-reverse; /* 主轴方向反转，图标到右边 */
gap: 8px;
padding: 12px 16px;
background-color: #f5f5f5;
border-radius: 4px;
justify-content: flex-end; /* 整体内容靠右对齐，如果不需要可以去掉 */
}
.icon-text-reverse-container .icon {
width: 16px;
height: 16px;
background-color: #337ab7;
border-radius: 2px;
}
.icon-text-reverse-container .text {
font-size: 14px;
color: #333;
}只需要一行 flex-direction: row-reverse 就完成了图标位置的切换，gap 属性依然会生效，控制图标和文本之间的间距，比传统方法调整 HTML 结构或者用浮动方便很多。
常见问题与注意事项
- gap 属性在部分旧版本浏览器（比如 IE 全系列）不支持，如果需要兼容旧浏览器，可以给 flex 项目设置 margin-right，然后给容器设置负的 margin 抵消边缘间距，不过现在大部分项目已经不需要兼容 IE，直接使用 gap 即可
- 如果图标是用 <img> 标签引入的，默认 img 是 inline 元素，放在 flex 容器内会自动变成 flex 项目，不需要额外设置 display 属性
- 如果文本有自定义的行高，可能会影响垂直对齐的效果，可以通过调整 align-items 的值或者给图标加少量 margin 微调
Flexbox 布局解决图标和文本的对齐与间距问题，核心优势就是代码简洁、逻辑清晰，不需要写很多冗余的 hack 样式，后期修改间距或者对齐方式的时候只需要改对应的属性值即可，大大提升了开发和维护的效率。