Flex布局，左边img 右边span,图片跟span 里的文字不在同一水平线

要实现左边是图片，右边是文字，但是图片和文字不在同一水平线上的效果，可以使用 Flex 布局中的 align-items 和 align-self 属性。

首先，将父元素设置为 Flex 布局：

<div class="container">
  <img src="image.jpg">
  <span>这是一段文字</span>
</div>

<style>
.container {
  display: flex;
}
</style>

接下来，使用 align-items 属性将整个容器内的元素垂直居中对齐：

.container {
  display: flex;
  align-items: center;
}

然后，使用 align-self 属性将图片和文字在垂直方向上对齐的位置进行调整。比如，可以将图片的 align-self 属性设置为 flex-start，将文字的 align-self 属性设置为 flex-end：

.container {
  display: flex;
  align-items: center;
}

img {
  align-self: flex-start;
}

span {
  align-self: flex-end;
}

这样，图片和文字就不会在同一水平线上了。如果需要微调，可以使用 margin 和 padding 属性进行调整。