结论：用 flex-direction: column + 媒体查询切换主轴方向，再配 min-width: 0 防文字溢出，才是可靠方案；只写 display: flex 会出横向滚动、文字撑破容器、图片变形等问题。因为 flex-direction: row 默认下文本受 min-width: auto 限制无法收缩，长内容撑破布局，且 flex: 1 无效，必须显式设 min-width: 0 并配合图片 max-width: 100% 和媒体查询纵排转横排。
直接说结论：用 flex-direction: column + 媒体查询切换主轴方向，再配 min-width: 0 防文字溢出，才是可靠方案；只写 display: flex 会出横向滚动、文字撑破容器、图片变形等问题。
为什么 display: flex 单独写不顶用
媒体对象典型结构是“左图右文”（如头像+用户信息），但默认 flex-direction: row 在小屏下完全失效——图片被压缩、文字不换行、整块溢出容器。根本原因是：
- 文本节点默认有
min-width: auto，长 URL 或连续中文不会收缩 -
flex: 1对文字内容无效，除非显式加min-width: 0 - 图片没设
max-width: 100%或object-fit，容易拉伸或模糊
@media (min-width: 768px) 切换 flex-direction 是关键
响应式逻辑应是：移动端优先纵排（图上文下），桌面端横排（图左文右）。不要依赖 flex-wrap: wrap 自动断行——它无法控制图文关系，反而可能把文字挤到第二行。
- 默认样式设为纵排：
.media { display: flex; flex-direction: column; } - ≥768px 切回横排：
@media (min-width: 768px) { .media { flex-direction: row; } } - HTML 结构保持语义一致（图在前、文在后），别用
order或row-reverse微调顺序
.media-body 必须加 min-width: 0
这是最常被忽略的一环。没有它，一段无空格的英文 URL 或长中文段落会阻止容器收缩，导致横向滚动条出现，尤其在 iOS Safari 和 Chrome Android 上。
- 正确写法：
.media-body { min-width: 0; flex: 1; } - 错误写法：
.media-body { flex: 1; }—— 溢出风险极高 -
min-width: 0不影响布局尺寸，只释放收缩限制 - 如果含
img { max-width: 100%; height: auto; }
对齐与图片渲染细节不能靠 margin 补救
横排时常见需求是图片和文字顶部对齐、居中对齐或基线对齐。用 align-items 控制，而不是给文字区域加 margin-top。
- 顶部对齐：
.media { align-items: flex-start; } - 垂直居中：
.media { align-items: center; } - 图片加
object-fit: cover前，必须设明确宽高（哪怕width: 100%），否则不生效 - IE 全系不支持
object-fit，需 fallback 方案（如背景图 +background-size）
复杂点在于：min-width: 0 不是可选优化项，而是必要防线；而 object-fit 的生效条件（宽高必须存在）也极易被忽略。这两处不处理，其他属性再全也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
