使用 Flexbox 可通过 flex-wrap 和 flex 属性实现卡片的自适应换行布局；2. 使用 Grid 的 repeat(auto-fit, minmax()) 能更简洁地创建响应式二维网格；3. 推荐优先使用 Grid，配合媒体查询优化多屏显示效果。
卡片式布局在现代网页设计中非常常见，适用于展示产品、文章、用户信息等内容。使用 CSS 的 Flexbox 或 Grid 布局都能高效实现整齐且响应式的卡片排列。以下是两种方式的具体实现方法。
使用 Flexbox 实现卡片布局
Flexbox 适合一维布局（行或列），控制主轴和交叉轴的对齐方式，能轻松实现等宽卡片自动换行排列。
基本结构：
HTML 结构示例：<div class="card-container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <!-- 更多卡片 --> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.card-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 16px; /* 卡片间距 */
padding: 16px;
}
<p>.card {
flex: 1 1 200px; /<em> 基础宽度约200px，可伸缩 </em>/
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}</p>说明：通过 flex: 1 1 200px 设置卡片最小宽度为 200px，在空间不足时自动换行，实现自适应布局。
使用 Grid 实现卡片布局
Grid 是二维布局系统，更适合精确控制行列结构，适合固定列数或响应式网格。
CSS 样式（推荐写法）：
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
}
<p>.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}</p>说明：auto-fit 会自动填充可用列，minmax(200px, 1fr) 表示每列最小 200px，最大占满剩余空间，实现响应式等分布局。
如果希望固定为三列：
grid-template-columns: repeat(3, 1fr);
响应式优化建议
无论使用 Flex 还是 Grid，都可以结合媒体查询进一步优化不同屏幕下的显示效果。
例如使用 Grid 配合断点：
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
padding: 16px;
}
<p>@media (max-width: 768px) {
.card-container {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}</p>这样在小屏幕上卡片自动变为更窄的多行排列，保持良好可读性。
基本上就这些，Grid 在处理卡片布局时更简洁强大，推荐优先使用；Flexbox 则在简单场景或需要灵活对齐时也很实用。
