Media Object 的核心结构用 display: flex 搭建，左侧设 flex: 0 0 auto（不缩放、不拉伸、按内容宽），右侧设 flex: 1 占满剩余空间；需控制 align-items 对齐、避免 width: 100% 冲突，并在 IE11 中补全 flex: 1 1 0% 和 flex: 0 0 auto。
Media Object 的核心结构怎么搭？
媒体对象本质是「左侧固定宽内容 + 右侧自适应内容」的组合，用 display: flex 最直接。关键不是套类名，而是理解主轴方向与尺寸控制逻辑——flex-direction: row 是默认值，不用显式写；但必须给左侧元素设 flex: 0 0 auto（不缩放、不拉伸、按内容宽），否则它会被压缩。
- 左侧图片/图标容器用
flex-shrink: 0防止被挤变形 - 右侧内容区用
flex: 1占满剩余空间，比flex: 1 1 auto更稳妥（避免 Safari 下的收缩异常） - 如果右侧要内部垂直排列（如标题+描述），再套一层
flex-direction: column
图片和文字对齐总不对齐？
align-items: flex-start 是默认行为，但常被忽略：图片顶部和文字基线默认不对齐。加 align-items: center 能让两者中线对齐；若需顶部对齐，用 align-items: flex-start 并确保图片没外边距干扰。
- 图片本身带默认
vertical-align: baseline，在 flex 容器里失效，但父级若非 flex，仍可能影响布局 - 文字行高（
line-height）过大时，会撑高整个 flex 行，此时应限制右侧容器的min-height或用align-self: flex-start单独调某一项 - 别依赖
margin-top去“手动对齐”，那是 hack，不是解法
响应式断点下左侧变宽或换行怎么办？
Flexbox 默认不换行，flex-wrap: wrap 会破坏媒体对象语义（左右结构变成上下堆叠）。真要响应式，优先用 @media 控制 flex-direction 切换，而不是改 flex-wrap。
- 小屏时设
flex-direction: column，左侧图片变块级居中，右侧内容自然下移 - 避免在媒体对象内部用
width: 100%，它和flex: 1冲突，导致计算错误 - 如果左侧图标需随屏幕缩小等比缩放，用
max-width: 100%+height: auto，而非固定像素
IE11 兼容时 flex 属性失效？
IE11 对 flex: 1 解析不稳定，尤其在嵌套 flex 容器里。必须补全老式语法：flex: 1 1 0%（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0%），且左侧元素必须明确写 flex: 0 0 auto，不能省略。
立即学习“前端免费学习笔记（深入）”；
- IE11 不支持
flex: none，得拆成flex: 0 0 auto -
align-items在 IE11 中对stretch支持差，若右侧内容高度不一致，优先用align-items: flex-start - 别用
gap——IE11 完全不支持，改用margin模拟间距
flex: 1 等价于 flex: 1 1 0%，而很多人误以为是 flex: 1 1 auto，结果在某些浏览器里右侧内容宽度计算出错。 
