使用css flex可实现响应式卡片网格布局。通过flex-wrap换行和gap设置间距，结合flex属性使卡片自适应伸缩；若需固定列数，可用calc()计算宽度并配合媒体查询调整不同屏幕下的显示列数，从而实现多行多列均匀排列且响应式友好的布局效果。
在现代网页设计中，卡片式布局非常常见，尤其适用于展示产品、文章或用户信息。使用CSS Flex布局可以轻松实现多行多列的均匀分布效果，同时保持良好的响应式特性。下面介绍如何用Flex实现卡片网格的多行多列均匀排列。
基本HTML结构
每个卡片放在一个容器内，结构清晰简洁：
<div class="card-grid"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <div class="card">卡片5</div> <div class="card">卡片6</div> </div>
使用Flex实现多行均匀分布
通过设置容器为flex并启用换行，可以让卡片自动换行形成多行布局：
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 卡片间距 */
}
.card {
flex: 1 1 300px; /* 弹性增长、收缩，基础宽度约300px */
min-width: 250px; /* 最小宽度防止过小 */
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
background-color: #f9f9f9;
text-align: center;
}
说明：
- flex-wrap: wrap 允许子元素换行。
- flex: 1 1 300px 表示每个卡片可伸缩，基础宽度为300px，在空间不足时自动缩小。
- gap 设置卡片之间的间距，比margin更方便。
控制每行固定列数（可选）
如果希望每行固定显示3列，可以通过设置卡片宽度来实现：
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: none; /* 不伸缩 */
width: calc((100% - 32px) / 3); /* 3列，减去两格gap */
}
注意：
- 使用 calc() 计算宽度，考虑gap的影响。
- 每行3个卡片时，总gap为2 * 16px = 32px。
- 此方法适合固定列数场景，但响应式需配合媒体查询调整。
响应式适配不同屏幕
结合媒体查询，可在小屏幕上减少每行列数：
@media (max-width: 768px) {
.card {
width: calc((100% - 16px) / 2); /* 平板：每行2列 */
}
}
@media (max-width: 480px) {
.card {
width: 100%; /* 手机：每行1列 */
}
}
优势：
- 在不同设备上都能保持良好布局。
- 配合flex和width控制，灵活且兼容性好。
基本上就这些。用Flex做卡片网格，既能均匀分布，又易于响应式调整，是目前最实用的方案之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
