display: inline-block 和 flex冲突解决办法

在做H5的横向滑动时需要设置子元素为行内元素，同时又需要用flex  来做垂直居中显示，发现display有个inline-flex属性

.x-scroll {
  overflow: scroll;
  white-space: nowrap;
  .item {
    display: inline-flex;//将inline-block改为这个
  }
  &::-webkit-scrollbar {
    display: none;
  }
}

注意的是，有时候使用 inline-flex 有时候会导致顶部留出空白，此时只能改用div，水平居中，用 width: fit-content; 来自适应宽度