在前端页面开发中，将图标精准放置在左侧矩形容器内并居中对齐是常见需求，Flexbox 布局凭借灵活的对齐控制能力，能快速实现这个效果。只需要正确设置容器的 Flexbox 相关属性，就能让图标稳定处于目标位置。
Flexbox 布局的核心对齐逻辑
Flexbox 布局有两个核心轴：主轴和交叉轴。默认情况下，主轴是水平方向，交叉轴是垂直方向。要让图标在左侧矩形容器内居中，需要明确两个方向的属性设置：
- justify-content：控制子元素在主轴方向的对齐方式，左侧对齐需要设置该属性为 flex-start
- align-items：控制子元素在交叉轴方向的对齐方式，垂直居中需要设置该属性为 center
基础实现步骤
1. 定义矩形容器样式
首先给左侧矩形容器添加 Flexbox 布局相关的基础样式，设置固定的宽高和边框方便观察效果：
/* 左侧矩形容器基础样式 */
.left-rect-container {
display: flex; /* 开启 Flexbox 布局 */
width: 120px; /* 容器宽度 */
height: 60px; /* 容器高度 */
border: 1px solid #e5e5e5; /* 边框方便观察容器范围 */
justify-content: flex-start; /* 主轴方向左对齐，图标靠左 */
align-items: center; /* 交叉轴方向居中对齐，图标垂直居中 */
padding-left: 15px; /* 可选：给左侧留一点内边距，避免图标贴边 */
}
2. 添加图标元素
在容器内放入图标元素，这里使用字体图标或者行内块元素模拟图标，示例中使用一个自定义的图标类：
<div class="left-rect-container">
<span class="icon">🔍</span>
</div>
3. 图标样式补充
如果需要调整图标的大小，可以给图标元素添加对应的样式：
/* 图标样式 */
.icon {
font-size: 20px; /* 调整图标大小 */
display: inline-block; /* 确保图标作为块级元素参与 Flexbox 对齐 */
}
常见问题与解决
图标没有垂直居中
如果出现图标垂直方向偏移的情况，首先检查容器的 align-items 属性是否设置为 center，同时确认图标元素没有设置额外的上下外边距或者固定高度，避免干扰 Flexbox 的对齐计算。
图标没有靠左显示
如果图标整体偏右，检查 justify-content 是否设置为 flex-start，同时确认容器没有设置 justify-content: center 或者其他居中对齐的属性，另外如果容器有 padding-right 过大也可能导致视觉上不靠左。
完整示例代码
以下是完整的 HTML 和 CSS 代码，可以直接复制到本地运行查看效果：
<!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>
.left-rect-container {
display: flex;
width: 120px;
height: 60px;
border: 1px solid #e5e5e5;
justify-content: flex-start;
align-items: center;
padding-left: 15px;
margin-bottom: 20px;
}
.icon {
font-size: 20px;
display: inline-block;
}
/* 多个容器示例 */
.container-list {
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<div class="container-list">
<div class="left-rect-container">
<span class="icon">🔍</span>
</div>
<div class="left-rect-container">
<span class="icon">📁</span>
</div>
<div class="left-rect-container">
<span class="icon">⚙️</span>
</div>
</div>
</body>
</html>
总结
使用 Flexbox 将图标精准居中于左侧矩形容器的核心就是正确设置容器的 display: flex、justify-content: flex-start 和 align-items: center 三个属性。只要理清主轴和交叉轴的对齐逻辑，这类布局需求就能快速实现，后续遇到类似的子元素对齐场景也可以复用这套属性设置思路。