在页面上用卡片展示数据

在页面上用卡片展示数据时候，碰到一个问题，一行上卡片数量比较多，导致卡片内容看不清，因此要允许卡片能够自动换行。

设置方法,在中设置相关属性。

display: flex是CSS中的一个属性，用于创建一个弹性盒子容器。它将容器的子元素（即卡片组件）排列在一个水平线上，并根据需要进行自动调整。

flex-wrap是用于设置弹性盒子容器中的子元素如何换行的属性。默认情况下，flex-wrap的值为 nowrap，即子元素不会换行，会一直在同一行上显示。当设置为 wrap 时，子元素会在容器的水平方向上自动换行，以适应容器的宽度。

    
class="card-box card-container">
            <div v-for="card in tableData":key="card.id"  class="card">
                <img src="@/view/img/card.svg" alt="">
                <div>
                    <div>name：div>
                    <div>age：div>
                    <div>address：div>
                div>
            div>
   div>    
 
<style>
.card-container {
  display: flex;
  flex-wrap: wrap;
}
style>