核心是用flex-direction: column + 媒体查询切换主轴方向，并配min-width: 0防文字溢出；仅display: flex无法应对窄屏，因默认row方向不适用且文字节点不自动收缩。
直接说结论：用 flex 实现响应式媒体对象（media object）排版，核心不是堆属性，而是靠 flex-direction: column + 媒体查询切换主轴方向，再配合 flex-shrink 和 min-width: 0 防文字溢出。
为什么不能只靠 display: flex 就完事
媒体对象典型结构是“左图右文”或“上图下文”，比如头像+用户信息、缩略图+标题摘要。很多人一上来就写 .media { display: flex; }，结果在小屏上图片被强行压缩、文字换行错乱、甚至整块溢出容器——这是因为默认 flex-direction: row 在窄屏下完全不适用，且文本节点默认不收缩（flex-shrink: 1 对文字内容无效，除非显式设 min-width: 0）。
常见错误现象：
- 小屏时文字撑破卡片，横向滚动条出现
- 图片高度塌陷或比例失真
- 右侧文字区域无法垂直居中对齐图片
- 使用
flex: 1后，IE11 或旧版 Safari 渲染异常
flex-direction: column 是移动端优先的关键切换点
响应式媒体对象的合理断点逻辑是：大屏横排（图左文右），小屏纵排（图上文下）。这比用 float 或绝对定位更可控，也比 Grid 更轻量。
实操建议：
- 默认样式设为纵排（移动端优先）：
.media { display: flex; flex-direction: column; } - 在 ≥768px 断点切回横排：
@media (min-width: 768px) { .media { flex-direction: row; } } - 注意：不要用
row-reverse或column-reverse来“微调顺序”，HTML 结构语义应保持一致（图在前、文在后），仅靠 CSS 控制视觉流
文字区域必须加 min-width: 0 才能真正响应
Flex 项目默认有 min-width: auto，这意味着内部的长单词、URL 或未折行的中文段落会阻止容器收缩，导致布局断裂。这是最常被忽略的一环。
正确写法示例：
.media-body {
min-width: 0; /* 关键！允许内部文本折行 */
flex: 1; /* 占满剩余空间 */
}
对比错误写法：.media-body { flex: 1; } —— 在 iOS Safari 15.6 或 Chrome Android 112 下，一段无空格的英文 URL 仍会强制拉宽整个 .media 容器。
补充说明：
-
min-width: 0不影响布局尺寸，只释放收缩限制 - 如果媒体对象内含
img，记得同时设img { max-width: 100%; height: auto; } - 避免对
.media-body设固定width，它应由 flex 分配决定
对齐细节：用 align-items 而非 margin 做垂直控制
横排时，图片和文字常需顶部对齐、居中对齐或基线对齐。用 margin-top 或 padding 模拟对齐，会在不同字号/行高下失效。
推荐组合：
- 顶部对齐（最常用）：
.media { align-items: flex-start; } - 垂直居中（如头像+用户名）：
.media { align-items: center; }，但需确保图片有明确高度（如height: 40px） - 基线对齐（适合图标+短文本）：
.media { align-items: baseline; }，此时需给图片设vertical-align: baseline
注意：align-items 作用于交叉轴，所以在 row 模式下控制的是垂直方向，在 column 模式下控制的是水平方向——这点容易反直觉，调试时建议打开浏览器开发者工具，勾选“Flexbox overlay”可视化主/交叉轴。
真正难的不是写出 flex 属性，而是理解哪些属性在什么条件下会失效；比如 flex: 1 在没有 min-width: 0 时形同虚设，align-items: center 在图片没设高度时根本不起作用。这些点不试几次真看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
