卡片在小屏幕不换行溢出是因flex-wrap: nowrap未改为wrap，且卡片宽度过大；高度不一致导致错位需用align-items: stretch或统一内容区高度；移动端点击无反馈需确保可点击元素尺寸充足并消除tap高亮。
卡片在小屏幕不换行，只显示一列还溢出
这是 flex 布局没设断点或 flex-wrap 被覆盖导致的。默认 flex-wrap: nowrap，卡片会强行挤在一行，超出容器就横向滚动或裁剪。
- 检查父容器是否写了
flex-wrap: wrap，没写就补上 - 确保卡片项没有设置固定宽度（比如
width: 300px）且未配合min-width: 0，否则 flex 无法收缩 - 移动端优先时，建议用
max-width: 100%+flex: 1 1 auto组合，避免卡片撑爆视口
用 grid 实现响应式卡片组更稳，但 IE 不支持
grid 的 repeat(auto-fit, minmax(280px, 1fr))) 是目前最简洁的自动换行写法，但它在 IE11 及更早版本完全不可用。
- 如果必须兼容 IE，得回退到
flex+ 媒体查询，或者用display: inline-block+calc() -
auto-fit和auto-fill行为不同：前者会合并空余轨道，后者保留所有格子，通常选auto-fit - 注意
minmax()第一个参数不能太小（如100px），否则小屏下可能生成过窄卡片，影响内容可读性
卡片高度不一致导致换行后出现错位缝隙
这是多列布局里最常被忽略的视觉问题——卡片内容长度不同，flex 或 grid 换行后，上一行高卡片会把下一行“顶歪”。
- 给卡片容器加
align-items: stretch（flex）或align-content: stretch（grid），让列内卡片等高 - 更可控的做法是统一卡片内容区域高度，比如对标题、描述设
min-height或用line-clamp截断 - 慎用
height: 100%，它依赖父级显式高度，在 flex/grid 中容易失效，优先用min-height
移动端点击卡片边缘无反馈，疑似 touch 区域太小
CSS 卡片常靠 padding 扩展可点击区域，但 iOS Safari 对 :active 样式有延迟且不触发，纯 CSS 伪类在触摸设备上表现不稳定。
立即学习“前端免费学习笔记（深入）”；
- 给卡片加
cursor: pointer和-webkit-tap-highlight-color: transparent消除点击灰斑 - 确保卡片包裹的
<a></a>或<button></button>元素本身有足够尺寸，不要只靠外层 div 的 padding 响应点击 - 如果用了
transform: scale(0.99)类似 hack 触发硬件加速，要确认没意外缩小了点击热区
换行逻辑本身不难，难的是卡片内容不可控时，怎么让高度、间距、点击态在各种设备上都“看起来正常”。多数问题出在假设内容长度一致，或者忘了 touch 设备和 hover 的行为根本不是一回事。
