如何用Flex实现Inline-block式图文换行对齐并消除对齐偏差？

1. Flex能实现inline-block的换行逻辑吗？ #

不行。Flex布局会把<img>和<span>拆成两个独立的Flex项，文本换行时图片会固定在容器左侧，没法像inline-block那样让图片跟着文本第一行一起换行（也就是图片作为文本流的一部分，和文本保持同行，文本换行时图片也同步移到下一行开头）。如果要保留这种换行行为，还是得基于内联流实现，比如用inline-block或者inline-flex。

2. 怎么消除两种布局的对齐差异？ #

inline-block的vertical-align: middle和Flex的align-items: center存在细微差异，核心是两者的对齐参照标准不同：

• vertical-align: middle：将元素中线与父元素内小写字母x的中线（即x-height中线）对齐
• align-items: center：将元素中线与Flex容器的交叉轴中线对齐

要让两者对齐效果完全一致，有两种解决思路：

思路一：调整Flex布局，匹配inline-block的对齐逻辑 #

给Flex容器的图片加上vertical-align: middle（哪怕是Flex项，这个属性依然生效），再配合align-items: baseline微调：

.example-b {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.example-b img {
  vertical-align: middle;
  /* 可根据实际字体微调top值，确保和inline-block效果完全一致 */
  position: relative;
  top: 0.1em;
}

思路二：调整inline-block，匹配Flex的对齐逻辑 #

把inline-block里图片的vertical-align改成center，或者配合行高调整：

.example-a {
  display: inline-block;
  padding-bottom: 24px;
  line-height: 1.5; /* 和Flex容器保持一致的行高 */
}
.example-a img {
  vertical-align: center; /* 用center替代middle，对齐容器中线 */
}

最优解：用inline-flex兼顾换行逻辑和精准对齐 #

如果想同时实现“图标随文本换行”和Flex的对齐效果，直接用inline-flex代替inline-block即可——它既有内联流的换行特性，又能利用Flex的align-items: center实现精准居中，完全消除对齐差异：

.example-c {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 24px;
}

<div class="example-c">
  <img src="https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et molestie nulla. Ut ut augue id mi porttitor scelerisque.</span>
</div>

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