根本原因是flex子项未设正确基准宽度，应使用flex: 0 0 calc(33.333% - 20px) + gap: 20px防压缩错位；高度不一致源于align-items: stretch默认拉伸，改用align-items: flex-start可独立撑高；justify-content管主轴对齐，align-items管交叉轴对齐。
直接用 display: flex + flex-wrap: wrap 就能实现卡片并排+自动换行，但多数人卡在卡片间距、换行错位、高度不一致这三处。
为什么卡片总在小屏下错位或挤成一列？
根本不是“没写 media query”，而是 flex 子项的基准宽度没设对。浏览器按默认 flex-basis: auto 计算，一旦内容撑开或字体缩放，卡片实际宽度就飘了。
- 别用
width: 33.333%—— 百分比会受父容器 padding、border 影响，且无法响应式收缩 - 改用
flex: 1 1 calc(33.333% - 20px)（其中20px是gap的一半）—— 但更推荐下面这个方案 - 最佳实践：
flex: 0 0 calc(33.333% - 20px)+ 父容器加gap: 20px；flex-shrink: 0防止被压缩，gap统一控距，不触发 margin collapse
卡片高度不一致，文字多的那张把整行都拉高了？
这是 align-items: stretch 的默认行为，不是 bug。你看到的“不整齐”，其实是 Flexbox 在帮你对齐底部——只是你没意识到它在干这事。
- 如果要每张卡片独立撑高，给容器加
align-items: flex-start - 如果要视觉上“等高”但内容不拉伸，用
min-height+overflow: hidden截断长文本，比 JS 计算 height 更稳 - 千万别在卡片里用
height: 100%—— Flex 容器中百分比高度失效是常态，除非父级有明确高度
卡片内图文排版总歪，justify-content 和 align-items 到底谁管横谁管竖？
主轴（main axis）方向由 flex-direction 决定：row 是水平主轴，column 是垂直主轴。所有 “justify-” 都作用于主轴，“align-” 都作用于交叉轴（cross axis）。
- 卡片横向排列（
flex-direction: row）时：justify-content控制左右对齐，align-items控制上下对齐 - 卡片纵向堆叠（
flex-direction: column）时：justify-content变成控制上下，align-items变成控制左右 - 常见误操作：在
row模式下用justify-content: center想居中卡片内容，结果整行卡片被挤到中间——其实该用align-items: center
真正难的不是写对那几行 CSS，而是理解 flex 项的尺寸如何被 flex-basis、内容、gap 和父容器共同挤压——稍一松动，换行点就偏移 1px，整行卡片就塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
