vue3 卡片水平排布

在Vue3中实现卡片的水平排布可以使用Flex布局。Flex布局是一种弹性盒子模型，可以方便地实现水平和垂直布局。下面是一个示例代码：

<template>
  <div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
  </div>
</template>

<style>
.card-container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.card {
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
  margin: 10px;
}
</style>

在上面的代码中，我们使用了`display: flex`将卡片容器设置为弹性盒子。然后使用`justify-content: center`将卡片水平居中。每个卡片使用`.card`类来定义样式。