<p>卡片列表不换行或错位的根本原因是未设flex-wrap: wrap，且子项缺乏最小宽度约束；应设flex-wrap: wrap、flex: 0 1 calc(33.333% - 1rem)、gap: 1rem，并慎用align-items: stretch。</p>
卡片列表在 flex 布局下不换行或错位
常见现象是 display: flex 容器里放了多个卡片，但宽度不够时卡片被强行压缩、文字溢出，甚至整行被挤到右侧消失。根本原因是没设 flex-wrap: wrap，或者子项没限制最小宽度导致 flex 伸缩失控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须加
flex-wrap: wrap，否则所有卡片死扛在一行 - 每个卡片用
flex: 0 1 calc(33.333% - 1rem)（三列布局示例），其中0 1表示不放大、可缩小，calc()预留间隙空间 - 避免对卡片设固定
width: 300px，这会让小屏下直接横向滚动 - 间隙用
gap: 1rem（推荐）而非margin，前者不触发 margin collapse，且 flex/grid 下更稳定
响应式断点下列数突变导致卡片高度不一致
比如从 3 列切到 2 列时，某些卡片因内容多而变高，破坏网格对齐。这不是 bug，是自然流式行为，但视觉上难看。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片统一设
height: min-content或height: fit-content，再配合align-items: flex-start防止顶部不对齐 - 更稳妥的是用
grid替代flex：父容器设display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，自动按最小宽度填满行 - 若必须用 flex，可在断点处加
align-content: flex-start，避免多行时卡片被垂直居中拉扯 - 慎用
align-items: stretch（flex 默认值），它会让所有卡片强制等高，内容少的卡片出现大片空白
移动端卡片点击区域太小或触摸反馈失效
PC 上 hover 有效，但手机点不动、无反馈，常因卡片内链接或按钮没撑满，或 touch-action 被误设。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卡片整体包一层
<a>或加role="button"+tabindex="0"，确保可聚焦可点击 - 卡片设
min-height: 120px（至少满足 iOS 最小触控 44×44px 换算），内部内容用padding调整留白 - 移除可能存在的
touch-action: none或-webkit-tap-highlight-color: transparent（后者要保留，但前者会禁掉所有手势） - 测试时用真机开启「辅助功能 > 显示触摸反馈」，确认点击有波纹或高亮
IE11 下 flex/grid 响应式卡片完全错乱
IE11 对 flex-wrap 支持有缺陷，minmax() 和 auto-fill 直接不识别，卡片全堆左上角或垂直排列。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃 IE11 原生 grid，改用
@supports (display: grid)包裹 grid 代码，IE 自动跳过 - flex 方案降级：用
display: -ms-flexbox+-ms-flex-wrap: wrap，并为子项加-ms-flex: 0 1 280px - 关键兼容写法：
flex-basis必须带单位（如flex-basis: 280px），IE11 不认flex-basis: auto或无单位数值 - 别依赖
gap，IE11 不支持，改用margin并用:nth-child()清除末尾边距
真正麻烦的不是写法，而是当卡片含图片+文字+徽标时，各浏览器对 min-content 的计算差异会导致高度微差——这点连 Chrome DevTools 的 layout view 都未必实时反映出来，得靠真机反复滑动验证。
