如何用css flex实现响应式卡片网格
使用CSS Flex可实现响应式卡片网格，通过flex-wrap换行和flex:1 1 200px使卡片自适应布局，结合媒体查询与calc()控制不同屏幕下的列数，gap设置间距，结构清晰兼容性强。
使用 CSS Flex 可以轻松实现响应式卡片网格，无需依赖浮动或定位。核心思路是利用 flex 的弹性布局特性，让卡片在不同屏幕尺寸下自动换行并等宽分布。
基本 HTML 结构
每个卡片放在一个容器中，结构清晰简洁：
卡片 1 卡片 2 卡片 3 卡片 4
使用 Flex 布局实现网格
通过设置父容器为 flex 并启用换行，子项根据可用空间自动排列：
.card-grid {
display: flex;
flex-wra
p: wrap;
gap: 16px; /* 卡片间距 */
padding: 16px;
}
.card {
flex: 1 1 200px; / 弹性增长、收缩，基础宽度 200px /
background: #f8f9fa;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
text-align: center;
}
p: wrap;
gap: 16px; /* 卡片间距 */
padding: 16px;
}
说明：
- flex-wrap: wrap 允许卡片在空间不足时换行
- gap 设置卡片之间的间距（现代浏览器支持良好）
- flex: 1 1 200px 表示每个卡片最小宽度约 200px，可根据容器空间伸缩
控制每行卡片数量（可选）
如果希望在不同屏幕下固定列数，可以结合媒体查询调整基础宽度：
/* 桌面端：每行 4 张 */
@media (min-width: 1024px) {
.card {
flex: 1 1 calc(25% - 12px);
}
}
/ 平板：每行 2 张 /
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 8px);
}
}
/ 手机：每行 1 张 /
@media (max-width: 480px) {
.card {
flex: 1 1 100%;
}
}
关键点：
- 使用 calc() 减去 gap 留出的间距，避免换行错乱
- 宽度用百分比配合 flex 基础值，实现精准列数控制
响应式图片或内容处理
若卡片内含图片，建议设置：
.card img {
width: 100%;
height: auto;
border-radius: 4px;
}
确保内容不会溢出，提升整体美观和适配性。
基本上就这些。用 flex 实现响应式卡片网格灵活且兼容性好，适合大多数项目场景。
