<div style="display:flex;flex-wrap: nowrap;overflow-x: auto;" :gutter="0" class="btn_warp">
        <template v-for="(item, index) in showList " :key="index" v-if="showList.length > 0">
          <span v-if="item.show" style="padding:10px 20px;flex: none;">
            <!-- :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl" -->
            <div class="row_title">
              <div class="name">{{ item.name }}</div>
              <div class="money">{{ item.value }}</div>
            </div>
          </span>
        </template>
      </div>

flex 实现：

.btn_warp{
   display: flex;
   overflow-x: auto;
   flex-wrap: nowrap;
}

span{
  flex:none;
}

注意：如果不加 flex: none; 所有的span会自动压缩宽度，以适配当前容器宽度。而这不是我想要的效果。

overflow-x: auto; 与 overflow-x: scroll; 的区别

• auto: 只有当内容溢出时，才显示滚动条

• scroll: 无论是否溢出都显示滚动条。主要是为了布局统一，防止滚动条有无导致布局偏差。

效果图：

若需要不显示滚动条添加样式：

.btn_warp::-webkit-scrollbar {
        display: none;
    }