CSSFlex响应式卡片布局教程

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

.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>

/* 桌面端：每行 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;
}