使用CSS Flex可实现响应式卡片网格，通过flex-wrap换行和flex:1 1 200px使卡片自适应布局，结合媒体查询与calc()控制不同屏幕下的列数，gap设置间距，结构清晰兼容性强。
使用 CSS Flex 可以轻松实现响应式卡片网格，无需依赖浮动或定位。核心思路是利用 flex 的弹性布局特性，让卡片在不同屏幕尺寸下自动换行并等宽分布。
每个卡片放在一个容器中，结构清晰简洁：
<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 并启用换行，子项根据可用空间自动排列：
.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>说明：
立即学习“前端免费学习笔记（深入）”；
如果希望在不同屏幕下固定列数，可以结合媒体查询调整基础宽度：
响应式网站设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该
58
/* 桌面端：每行 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>关键点：
若卡片内含图片，建议设置：
.card img {
width: 100%;
height: auto;
border-radius: 4px;
}
确保内容不会溢出，提升整体美观和适配性。
基本上就这些。用 flex 实现响应式卡片网格灵活且兼容性好，适合大多数项目场景。
以上就是如何用css flex实现响应式卡片网格的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
360
收藏
