卡片布局首选 display: flex，因其天然支持对齐、换行与等高；配合 flex-wrap、gap 和分层响应式断点（如480px/768px），可实现多端适配；图片用 object-fit + 容器约束确保不拉伸，阴影圆角宜用相对单位并调低透明度。
卡片布局用 display: flex 而不是 float 或 inline-block
Flexbox 是目前最可控、最简洁的卡片容器方案。用 float 容易塌陷，inline-block 有看不见的空白间隙，而 display: flex 天然支持对齐、换行和等高，尤其适合多卡片网格。
关键点：
- 父容器设
display: flex+flex-wrap: wrap，子卡片设flex: 1 1 calc(33.333% - 2rem)（三列带间距） - 用
gap: 1rem替代手动 margin，更干净且自动处理边缘 - 卡片内部结构也推荐用 flex：比如头图+内容+按钮垂直堆叠，用
flex-direction: column+justify-content: space-between保证底部按钮始终贴底
移动端断点别只写 @media (max-width: 768px)
768px 是 iPad 常见宽度，但很多安卓中屏手机（如 Pixel 5、OnePlus Nord）实际视口只有 412px–428px。只靠一个断点，小屏上卡片会挤成窄条，文字折行混乱，图片被拉伸。
建议分层响应：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 480px)：单列，flex-basis: 100%，gap减至0.75rem -
@media (min-width: 481px) and (max-width: 768px)：双列，flex-basis: calc(50% - 0.75rem) -
@media (min-width: 769px)：默认三列或四列（取决于设计密度）
注意：断点值应基于内容溢出表现来定，而不是设备型号——打开浏览器调试器，拖动窗口看卡片何时开始“难受”，那个宽度就是你的断点。
