利用flex布局实现横向滚动功能

<template>
  <div class="container">
    <ul class="content">
      <li class="item" v-for="item in list" :key="item">
        <img :src="`/public/pisa/${item}`" />
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const list = ref(['nx.png', 'ny.png', 'nz.png', 'px.png', 'py.png', 'pz.png'])
</script>

<style scoped>
ul {
  list-style: none;
}

.container {
  overflow: auto;
}

.content {
  display: flex;
}

.item {
  flex: none;
  width: 100px;
  height: 100px;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>