为何设置flex-grow:1后Font Awesome图标与文字出现位置分离？

问题原因 #

你给<i>标签设置的flex: 1是flex简写属性，权重高于单独设置的flex-basis: 60px，实际生效的样式为flex-grow:1; flex-shrink:1; flex-basis:0%，这会让图标容器自动占满flex布局下的所有剩余可用空间，自然就和右侧文字块拉开了过大的间距。

解决方案 #

直接移除<i>标签的flex:1属性即可，如果需要固定图标宽度不被挤压，可以额外加flex-shrink: 0；如果需要调整图标和文字的垂直对齐效果，可以给父容器.srv加align-items属性，也可以用gap属性统一控制图标和文字的间距，避免间距异常。

修正后的CSS代码

.srv {
  display: flex;
  /* 可选：调整垂直对齐，center为垂直居中，flex-start为顶部对齐 */
  align-items: flex-start;
  /* 可选：统一设置图标和文字的固定间距 */
  gap: 20px;
}
 
i {
  color: #10cab7;
  flex-basis: 60px;
  /* 防止图标宽度被挤压变形 */
  flex-shrink: 0;
}

h3 {
  margin: 0px;
}

p {
  line-height: 1.6;
  color: #444;
  font-weight: 300;
}

内容的提问来源于stack exchange，提问作者user15259381