代码片段： https://developers.weixin.qq.com/s/3xXJBZmK7fTq

如下所示，我写了一个简单的组件，从样式表可以看的出来，我希望插槽top和bottom在contain-flex容器的顶部和底部，但是现在渲染出来的结果是，全部跑到了contain-flex的右侧：

除非取消contain-flex的flex布局才能实现我要的效果：

但就算这样，top插槽的位置依然在contain-flex的下面，就很扯。

<view class="tips-box">
  <view class="contain-block">
      <slot name="top"></slot>
    <view class="contain-flex">
      <image class="tips-src" src="{{src}}" style="{{srcStyle}}" mode="widthFix" />
      <slot></slot>
    </view>
    <view>
      <slot name="bottom"></slot>
    </view>
  </view>
</view>

.tips-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}


.contain-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}


.contain-flex {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;


}

<tips-img src="https://sbg-oss-test.oss-cn-hangzhou.aliyuncs.com/store-conduction-app/user/treasure-hunt-ar/product.png" srcStyle="width: 308rpx; height: 308rpx; ">
  <view class="tips-text" slot="top">
    <view>aaaa</view>
  </view>
  <view class="tips-text" slot="bottom">
    <view>bbbb</view>
  </view>
  <view class="tips-text" slot="top">
    <view>cccc</view>
  </view>
</tips-img>