flex图文不对齐主因是align-items默认stretch导致拉伸错位，应设flex-start顶部对齐；换行错乱需检查flex-wrap和min-width；图片模糊宜用object-fit配合宽高；文字截断须配合white-space和overflow。
Flex布局中图片和文字不对齐？检查align-items默认值
Flex容器默认align-items: stretch，图片高度不一致或文字行数变化时，两边会“被拉高”导致视觉错位。尤其当图片是<img alt="CSS媒体对象布局_Flex实现左图右文的经典排版模式" >且没设height，而文字只有1行，右侧容器会被撑开、底部留白。
- 把容器
align-items显式设为flex-start，让图文顶部对齐 - 如果需要垂直居中，改用
align-items: center，但要确认图片和文字盒模型高度是否可预测（比如img外层加display: block防基线留空） - 避免依赖
vertical-align——在Flex里它对子元素无效
左图右文换行错乱？别漏掉flex-wrap: nowrap
默认flex-wrap: nowrap是安全的，但一旦父容器宽度不足，或子元素设置了min-width，Flex可能强行换行，把文字挤到下一行。这不是bug，是Flex按规则“换行优先”导致的。
- 确认父容器没有意外的
width限制（比如max-width: 100%在小屏下缩得太狠） - 给图片加
flex-shrink: 0，防止它被压缩变形；给文字区域加min-width: 0（解决text内容过长时Flex不收缩的问题） - 真需要响应式断行？用
@media手动切回flex-direction: column，别指望flex-wrap自动处理图文关系
图片模糊或拉伸？object-fit比width/height更可控
直接设img { width: 200px; height: 150px; }容易失真。Flex不控制子元素内部渲染逻辑，图片仍按原始宽高比拉伸或裁剪。
- 给
<img alt="CSS媒体对象布局_Flex实现左图右文的经典排版模式" >加object-fit: cover（保持比例+填满）或contain（保持比例+完整显示） - 必须配
width和height（哪怕只是100%），否则object-fit不生效 - 注意兼容性：
object-fit在IE全系不支持，如需兼容，得用背景图+background-size替代
文字溢出截断失效？overflow要配合white-space和text-overflow
Flex子项默认white-space: normal，文字会换行，text-overflow: ellipsis只对单行有效。很多人加了overflow: hidden却没生效，就是卡在这儿。
立即学习“前端免费学习笔记（深入）”；
- 单行截断：加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行截断：不能只靠CSS（
display: -webkit-box方案兼容差），建议JS计算行高+截断，或用line-clamp（仅WebKit系稳定） - 确保文字容器有明确宽度（比如
flex: 1或width: 0+min-width: auto），否则overflow无参照
