移动端多列卡片用Flex实现换行并均等间距，关键在于：容器设flex-wrap: wrap、子项宽度用calc减去gap分摊值、统一用gap管理间距不混用margin；兼容老系统需@supports降级为margin方案，并通过flex-direction: column和margin-top: auto对齐底部按钮。
移动端多列卡片用 Flex 实现换行并保持间距均等，关键不在“写多少代码”，而在于三处控制：容器必须允许换行、子项宽度计算要扣掉 gap、所有间距由 gap 统一管理——不混用 margin。
必须启用 flex-wrap 并设对父容器
只写 display: flex 不会换行，浏览器默认 flex-wrap: nowrap。必须显式加：
- flex-wrap: wrap —— 让卡片在宽度不足时自动折到下一行
- 搭配 gap: 12px（推荐 rem 或 px），它只作用于项目之间，不碰容器边缘，换行后最后一行右侧不会多出空白
- 别用 column-gap 或 row-gap 单独写——Flex 容器里它们无效，DevTools 会标灰
子项宽度要减去 gap 值，不能靠 calc(100%/n)
移动端 viewport 缩放和小数精度会让 calc(33.333%) 累计误差，导致最后一列意外换行。稳妥写法是：
- 两列布局：flex: 0 0 calc(50% - 6px)（gap 为 12px 时，每边分摊 6px）
- 三列布局：flex: 0 0 calc(33.333% - 8px)（gap 为 16px 时）
- 加 min-width: 280px 防止小屏下卡片过窄、文字挤成一团
兼容老系统要降级，但别用 :last-child
iOS Safari ≤14.1 或部分 Android WebView 不支持 gap。回退方案要避开常见陷阱：
- 先写 gap: 12px，再用
@supports not (gap: 0) { ... }包裹降级样式 - 降级时用相邻兄弟选择器：.card + .card { margin-left: 12px; }，比
:last-child可靠——Flex 换行后它仍生效 - 垂直间距用 margin-bottom: 12px，并在父容器加 margin-bottom: -12px 抵消末尾多余空隙
卡片内底部按钮对齐，要配合 column 方向
换行只是第一步，如果卡片内容高度不一，底部按钮看起来还是参差不齐。需同步处理内部结构：
- 每个卡片加 display: flex; flex-direction: column;
- 按钮或按钮容器必须是卡片的直接子元素
- 给按钮容器加 margin-top: auto，它才会被推到底部
- 外层卡片网格要设 align-items: stretch（默认值），并确保卡片没写死 height，否则等高失效
