开启flex-wrap并设置gap可实现多行卡片布局，结合align-content控制行对齐，使用flex:1 1 min-width实现响应式自适应，避免错位与空白，提升视觉整齐度与兼容性。
在使用 Flexbox 实现多行卡片布局时，合理利用 flex-wrap、gap 和 align-content 能有效提升视觉整齐度与响应式表现。关键在于控制换行行为和行间对齐，避免空白断层或不均匀分布。
启用换行并设置间距（flex-wrap 与 gap）
默认情况下，Flex 容器不会换行，所有子项挤在同一行。要实现多行卡片排列，必须开启换行，并通过 gap 统一间距。
- flex-wrap: wrap; 允许子元素换行，是多行布局的基础。
- gap: 16px; 设置卡片之间的横向和纵向间距，比 margin 更简洁，不会产生边距折叠问题。
- 容器建议设置 display: flex; 并配合 flex-direction: row;（默认值）。
示例代码：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 200px; /* 最小宽度约200px，可伸缩 */
}
控制多行对齐方式（align-content）
当容器高度固定或内容不足撑满空间时，align-content 决定多行之间的分布状态。它只在有多行且存在额外垂直空间时生效。
- align-content: flex-start; 所有行靠顶部对齐，适合大多数卡片列表。
- align-content: space-between; 行之间等距分布，首尾行贴边，适合展示类布局。
- align-content: space-around; 每行上下有相等间隙，视觉更松散。
- align-content: stretch; 行拉伸填满容器（需子项 align-self 不限制），适合等高卡片。
注意：如果只有一行，align-content 无效。此时应使用 justify-content 控制该行内对齐。
响应式适配与 flex 值设置
为了在不同屏幕下保持良好布局，建议使用 flex: 1 1 [min-width] 模式，让卡片自动换行。
- 设置 flex-basis 为最小宽度（如 250px），浏览器会尽量每行放多个，放不下就换行。
- 避免使用固定宽度 + margin，容易导致最后一行错位或空隙过大。
- 结合媒体查询微调 gap 或 min-width，在移动端减少间距或改为单列。
基本上就这些。用好 wrap、gap 和 align-content，再配合合理的 flex 属性，就能实现整洁、自适应的多行卡片布局，无需依赖 Grid 也能达到理想效果。
