如何用css flex实现响应式卡片网格-css教程-PHP中文网

如何用css flex实现响应式卡片网格

P粉602998670

发布： 2025-10-12 12:07:01

原创

535人浏览过

使用CSS Flex可实现响应式卡片网格，通过flex-wrap换行和flex:1 1 200px使卡片自适应布局，结合媒体查询与calc()控制不同屏幕下的列数，gap设置间距，结构清晰兼容性强。

如何用css flex实现响应式卡片网格

使用 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>

登录后复制

使用 Flex 布局实现网格

通过设置父容器为 flex 并启用换行，子项根据可用空间自动排列：

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 卡片间距 */
  padding: 16px;
}
<p>.card {
flex: 1 1 200px; /<em> 弹性增长、收缩，基础宽度 200px </em>/
background: #f8f9fa;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
text-align: center;
}</p>

登录后复制

说明：

立即学习“前端免费学习笔记（深入）”；

flex-wrap: wrap 允许卡片在空间不足时换行
gap 设置卡片之间的间距（现代浏览器支持良好）
flex: 1 1 200px 表示每个卡片最小宽度约 200px，可根据容器空间伸缩

控制每行卡片数量（可选）

如果希望在不同屏幕下固定列数，可以结合媒体查询调整基础宽度：

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

查看详情

/* 桌面端：每行 4 张 */
@media (min-width: 1024px) {
  .card {
    flex: 1 1 calc(25% - 12px);
  }
}
<p>/<em> 平板：每行 2 张 </em>/
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 8px);
}
}</p><p>/<em> 手机：每行 1 张 </em>/
@media (max-width: 480px) {
.card {
flex: 1 1 100%;
}
}</p>

登录后复制

关键点：

使用 calc() 减去 gap 留出的间距，避免换行错乱
宽度用百分比配合 flex 基础值，实现精准列数控制

响应式图片或内容处理

若卡片内含图片，建议设置：

.card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

登录后复制

确保内容不会溢出，提升整体美观和适配性。

基本上就这些。用 flex 实现响应式卡片网格灵活且兼容性好，适合大多数项目场景。

以上就是如何用css flex实现响应式卡片网格的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css响应式表格滚动条优化 CSS定位元素如何响应式适配屏幕_media查询与position结合 CSS定位元素的overflow属性对显示效果有何影响_布局与裁剪分析 CSS响应式布局中如何控制隐藏与显示_display与opacity结合技巧如何在CSS中实现响应式表单输入框大小_百分比与rem单位结合