vue实现卡片平铺
Vue 实现卡片平铺布局
使用 Vue 实现卡片平铺布局通常结合 CSS Grid 或 Flexbox 实现响应式排列，以下是两种常见方法：
使用 CSS Grid 布局
通过 display: grid 定义网格容器，利用 grid-template-columns 控制列数和卡片宽度：
<template>
<div class="card-container">
<div v-for="(item, index) in cardList" :key="index" class="card">
<!-- 卡片内容 -->
{{ item.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
cardList: [
{ title: "卡片1" },
{ title: "卡片2" },
// 更多卡片数据...
]
};
}
};
</script>
<style scoped>
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px; /* 卡片间距 */
}
.card {
background: #fff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>- 关键点：
repeat(auto-fill, minmax(250px, 1fr))自动填充容器，卡片最小宽度 250px，等分剩余空间。gap控制卡片间距。
使用 Flexbox 布局
通过 Flexbox 实现类似效果，适合需要动态调整卡片宽度的场景：
<template>
<div class="card-container">
<div v-for="(item, index) in cardList" :key="index" class="card">
<!-- 卡片内容 -->
{{ item.title }}
</div>
</div>
</template>
<style scoped>
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 250px; /* 基础宽度 250px，可伸缩 */
background: #fff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>- 关键点：
flex-wrap: wrap允许换行。flex: 1 1 250px定义卡片伸缩行为和基础宽度。
响应式调整
通过媒体查询进一步优化不同屏幕尺寸下的显示：
@media (max-width: 768px) {
.card {
flex: 1 1 100%; /* 小屏幕下卡片占满整行 */
}
}使用第三方库（可选）
如需复杂布局（如瀑布流），可考虑以下库：
- Vue Masonry：基于 Masonry.js 的瀑布流组件。
- Vue Virtual Scroller：优化大量卡片的滚动性能。
以上方法可根据项目需求选择，CSS Grid 适合规则排列，Flexbox 灵活性更高，第三方库适用于特殊场景。
