使用CSS Flexbox可轻松实现卡片自适应布局：1. 设置容器display: flex、flex-wrap: wrap和gap；2. 卡片设flex: 1 1 200px并配合min-width防止压缩；3. 用calc(33.333% - 间距)控制每行数量；4. 结合媒体查询在不同屏幕调整flex-basis，实现响应式排列。
使用 CSS Flexbox 实现卡片自适应排列非常直观且高效。通过设置容器为弹性布局，可以让卡片在不同屏幕尺寸下自动换行、对齐和等宽分布，无需依赖浮动或定位。
1. 基础结构与 Flex 容器设置
要实现自适应排列，先定义一个父容器，并将其设为 flex 布局：
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 16px; /* 卡片之间的间距 */
padding: 16px;
}
.card {
flex: 1 1 200px; /* 弹性增长、收缩，基础宽度约 200px */
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
说明：
- display: flex 启用弹性布局
- flex-wrap: wrap 让子元素在空间不足时自动换行
- gap 控制卡片之间的间距（现代浏览器支持良好）
- flex: 1 1 200px 表示每个卡片可伸缩，最小宽度约为 200px
2. 控制每行卡片数量（可选）
如果你希望更精确地控制每行显示数量（如始终 3 列），可以调整 flex-basis 配合百分比：
立即学习“前端免费学习笔记（深入）”；
.card {
flex: 1 1 calc(33.333% - 16px); /* 每行最多 3 个，减去间距 */
}
适配不同屏幕时可用媒体查询微调：
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 12px); /* 平板：每行 2 个 */
}
}
@media (max-width: 480px) {
.card {
flex: 1 1 100%; / 手机：每行 1 个 /
}
}
3. 对齐与响应优化
为了让内容在不同设备上更美观，可添加对齐方式和最小宽度限制：
.container {
justify-content: center; /* 水平居中（当未占满时） */
align-items: stretch; /* 垂直拉伸卡片高度一致 */
}
给卡片加最小宽度防止过度压缩：
.card {
min-width: 200px;
}
基本上就这些。Flexbox 的优势在于简洁灵活，只需几行 CSS 就能让卡片在桌面、平板和手机上自然排列，无需 JavaScript 或复杂计算。关键是合理使用 flex-wrap、flex 属性和 gap，再配合媒体查询做细节调整即可。不复杂但容易忽略的是 min-width 和 calc() 的结合使用，能有效提升响应体验。
