在前端页面开发中，图标与文本的组合布局是极为常见的需求，比如导航菜单、按钮组件、列表项等场景都会用到。传统的布局方式需要通过设置行高、内边距或者定位来实现对齐，往往会出现不同字体大小下对齐偏差、多行文本场景下布局混乱等问题。Flexbox弹性布局的出现很好地解决了这些痛点，通过简单的属性配置就能实现图标与文本的优雅排列和精准垂直居中。
Flexbox核心相关属性说明
要实现图标与文本的垂直居中和对齐，需要用到Flexbox的几个核心属性，下面先对这些属性做简单说明：
- display: flex：将容器设置为弹性容器，内部的子元素会自动成为弹性项目
- align-items：定义弹性项目在交叉轴（默认是垂直方向）上的对齐方式，常用值有center（居中）、flex-start（顶部对齐）、flex-end（底部对齐）
- justify-content：定义弹性项目在主轴（默认是水平方向）上的对齐方式，可根据需求调整水平排列规则
- gap：设置弹性项目之间的间距，比传统的margin设置更方便，不会出现边缘多余间距的问题
基础场景：单行图标与文本垂直居中
最常见的场景是单行文本搭配图标，需要两者在垂直方向居中对齐，水平方向按顺序排列，具体实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox单行图标文本布局</title>
<style>
.icon-text-wrap {
display: flex;
align-items: center; /* 垂直方向居中对齐 */
gap: 8px; /* 图标和文本之间的间距 */
padding: 10px 16px;
background-color: #f5f5f5;
border-radius: 4px;
width: fit-content;
}
.icon {
width: 20px;
height: 20px;
background-color: #409eff;
border-radius: 2px;
/* 实际项目中这里可以替换为图标字体或者img标签 */
}
.text {
font-size: 14px;
color: #333;
}
</style>
</head>
<body>
<div class="icon-text-wrap">
<div class="icon"></div>
<span class="text">这是单行文本示例</span>
</div>
</body>
</html>上述代码中，给外层容器设置display: flex和align-items: center后，内部的图标和文本就会自动在垂直方向居中对齐，gap属性设置了两者的间距，不需要单独给图标或者文本加margin，避免了边缘多余间距的问题。
进阶场景：多行文本与图标垂直居中
当文本内容过长出现多行时，默认的align-items: center会让图标和文本块整体居中，如果希望图标和文本的第一行对齐，或者和文本整体居中对齐，可以调整对应的属性：
1. 图标与多行文本整体垂直居中
这种情况和单行文本的实现方式一致，Flexbox会自动处理多行文本的情况，代码如下：
.multi-line-wrap {
display: flex;
align-items: center; /* 整体垂直居中 */
gap: 8px;
padding: 12px 16px;
border: 1px solid #e5e5e5;
width: 300px;
}
.multi-line-text {
font-size: 14px;
color: #666;
line-height: 1.5;
}2. 图标与多行文本第一行对齐
如果需要图标和多行文本的第一行对齐，只需要将align-items的值改为flex-start即可：
.multi-line-top-wrap {
display: flex;
align-items: flex-start; /* 顶部对齐，即和第一行文本对齐 */
gap: 8px;
padding: 12px 16px;
border: 1px solid #e5e5e5;
width: 300px;
}常见适配问题与解决方案
在实际使用中，可能会遇到一些特殊情况，下面是常见问题的解决方法：
| 问题场景 | 解决方案 |
|---|---|
| 图标高度和文本行高不一致导致对齐偏差 | 给图标设置flex-shrink: 0，避免图标被压缩，同时确认align-items设置为center |
| 文本有不同字体大小，需要对齐基准调整 | 可以给文本容器设置display: flex; align-items: center，内部文本再单独设置字体大小 |
| 需要图标在右侧，文本在左侧排列 | 给图标设置order: 1，或者调整HTML中图标和文本的顺序，也可以设置flex-direction: row-reverse |
完整可复用组件示例
下面是一个可以直接复用的图标文本组件代码，支持自定义图标大小、间距、对齐方式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox图标文本组件</title>
<style>
.icon-text {
display: flex;
align-items: center;
gap: var(--gap, 8px);
padding: var(--padding, 10px 16px);
}
.icon-text__icon {
width: var(--icon-size, 20px);
height: var(--icon-size, 20px);
flex-shrink: 0;
background-color: var(--icon-color, #409eff);
border-radius: 2px;
}
.icon-text__text {
font-size: var(--font-size, 14px);
color: var(--text-color, #333);
line-height: 1.5;
}
/* 顶部对齐修饰类 */
.icon-text--top {
align-items: flex-start;
}
</style>
</head>
<body>
<!-- 默认居中 -->
<div class="icon-text" style="--icon-size: 24px; --gap: 10px;">
<div class="icon-text__icon"></div>
<span class="icon-text__text">这是默认居中的图标文本组件</span>
</div>
<br>
<!-- 顶部对齐 -->
<div class="icon-text icon-text--top" style="--icon-size: 24px; width: 300px;">
<div class="icon-text__icon"></div>
<span class="icon-text__text">这是多行文本场景，图标和第一行文本顶部对齐，内容过长会自动换行显示</span>
</div>
</body>
</html>通过Flexbox实现图标与文本的布局，代码简洁、适配性强，不需要依赖复杂的计算或者第三方库，是前端开发中非常实用的布局技巧，掌握后可以应对绝大多数图标文本组合的场景。