CSS用flex布局实现横向左右滚动，且隐藏左右拖动滚动条的实现

需求

在一行（例如一个div中）需要排多个元素，如果一行排不下的情况，我们不希望内容换行(默认情况就会换行)，而是可以左右让用户进行左右滑动（滚动，例如鼠标拖动或者手指拖动），另外因为不影响美观，还希望可以隐藏横向的左右拖动滚动条。

实现

我已经写好了h-scroll，只要给上层div加这个class就可以了。

.h-scroll {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

另外h-scroll下面的子元素，例如是一些div，那么要给这些div设置成display:inline-block;

.h-scroll div {
  display: inline-block;
}

以下CSS加在h-scroll上，可以隐藏横向滚动条，如下：

/* Safari and Chrome 下隐藏滚动条，但是还是可以滚动 */
.h-scroll::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

vue下实现鼠标或者手指拖动的滚动效果，详见：https://blog.terrynow.com/2022/07/02/vue-dragcroll-implement-drag-scroll/