最直接办法是设容器 display: flex + flex-direction: column 实现图文上下排列；用 gap 控制间距更稳定；图片用 object-fit 防变形；垂直居中需区分主轴/交叉轴，避免滥用 justify-content 或 align-items。
用 display: flex + flex-direction: column 控制图文上下顺序
卡片里文字在上、图片在下，或反过来，最直接的办法就是让容器变成垂直主轴的 Flex 容器。默认 flex-direction 是 row（水平），改成 column 就能自然实现上下排列。
常见错误是只加 display: flex 却忘了改方向，结果图文还是并排挤在一起；或者给子元素单独设 margin-top“推”位置，后续换图或换文案就容易错位。
-
flex-direction: column适用于绝大多数现代浏览器（IE10+ 支持，但需加-ms-前缀） - 子元素默认按 HTML 顺序从上到下排列，想倒序？加
flex-direction: column-reverse - 避免对图片或文字块设固定
height，否则可能截断内容；优先用min-height或留白控制高度
图文间距用 gap 而不是 margin
卡片内部图文之间留空，很多人习惯给图片加 margin-top 或给文字加 margin-bottom。问题在于：一旦图文顺序调整、或某一项被隐藏，margin 就会失效或叠加，布局容易失控。
gap 是 Flex 和 Grid 的原生间距控制属性，只作用于相邻子项之间，不依赖具体元素类型，也不受隐藏/条件渲染影响。
立即学习“前端免费学习笔记（深入）”；
- 在 Flex 容器上设
gap: 16px，图文间自动留出统一间距 - IE 不支持
gap（Flex gap 仅 IE 完全不支持），如需兼容，可回退为margin-bottom并确保最后一项不加 - 不要和
align-items混用导致意外偏移——gap只管间距，不管对齐
图片自适应高度时，用 object-fit 防止图文错位
卡片中图片宽高比不固定，又希望它填满指定区域，直接设 width: 100%; height: 100% 很容易拉伸变形，进而撑开容器、带偏文字位置。
object-fit 才是控制图片如何“装进”盒子的正确方式，它不影响布局流，只改变图片渲染行为。
-
object-fit: cover保持比例裁切填充（推荐用于封面图） -
object-fit: contain保持比例完整显示（适合图标或示意图） - 必须配合
width和height使用，否则object-fit不生效 - 别忘了加
height: 0; padding-bottom: 56.25%这类响应式占位技巧，否则cover在窄屏下可能压扁文字
文字垂直居中要小心 align-items 和 justify-content 的作用域
有人想让卡片里的标题在图片上方垂直居中，就给整个卡片容器加 align-items: center，结果发现文字左右居中了，但上下没动——因为 align-items 控制的是交叉轴，而 flex-direction: column 下交叉轴是水平方向。
真正控制“上下居中”的是 justify-content（主轴对齐），但它只对 Flex 容器内所有子项整体起作用，不能单独居中某一段文字。
- 单行标题垂直居中：给文字外层包一个
div，设display: flex; align-items: center; height: 100% - 多行文字+图片整体居中：把图文都包进一个子容器，再对该子容器用
justify-content: center - 别在卡片根容器上滥用
justify-content: center，否则图片会被往上顶，脱离预期位置
复杂点在于：图文上下布局看着简单，但一旦涉及响应式、多状态（加载中/错误态）、或服务端渲染的 DOM 差异，flex 的隐式行为就容易暴露。最稳妥的做法，是把图文当作两个明确语义区块来约束，而不是靠“推”和“挤”去凑效果。
