flex图文错位主因是align-items默认stretch导致拉伸，应显式设flex-start顶部对齐；图片需加flex-shrink:0和display:block防压缩与基线留空；文字容器须用flex:1+min-width:0防撑宽。
flex容器必须设display: flex且align-items: flex-start
默认align-items: stretch会让图片和文字容器被拉到同一高度，结果文字“吊”在底部、图片顶部对齐——看着像错位。这不是bug，是Flex的默认行为。必须显式写align-items: flex-start，让图文都从顶部开始贴齐。
如果想垂直居中，改用align-items: center，但得同步给<img>加display: block，否则基线留空会让图片实际位置偏下。
-
vertical-align在Flex容器里完全无效，别试 - 别只靠
margin-top硬调，换图或换字体就失效 - 父容器若设了
height但内容不够高，stretch会强行撑开文字区域，加align-items: flex-start能立刻解决
图片必须加flex-shrink: 0 + 明确width
Flex默认允许子项收缩（flex-shrink: 1），小屏下<img>会被压缩变形。直接写width: 40px还不够，必须配flex-shrink: 0锁死宽度。
常见错误是只设width没关收缩，或者用max-width代替width——后者不触发Flex的尺寸计算逻辑，flex-shrink: 0也就没意义。
- 高度建议用
height: auto保比例，避免失真 - 如需裁剪填充，加
object-fit: cover，但必须有明确width和height（哪怕写height: 40px） - IE全系不支持
object-fit，兼容场景改用背景图
文字容器要用flex: 1 + min-width: 0
flex: 1让文字区域吃掉剩余所有空间，比写margin-left: 48px之类更健壮。但它有个隐藏前提：子元素内部不能“拒绝收缩”。长URL、无空格字符串、或未设white-space的文本会强行撑宽容器，导致布局断裂。
根本解法是给文字容器加min-width: 0——这告诉Flex：“这个盒子可以缩到0，别怕”。没有它，flex: 1在遇到长文本时直接失效。
- 单行截断要三件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 多行截断别依赖纯CSS，
line-clamp在Firefox和部分安卓浏览器不稳定 - 别给文字容器设
width，和flex: 1冲突，优先级难预测
响应式切换别依赖flex-wrap: wrap
想在手机上把左图右文变成上下排列？别指望flex-wrap: wrap自动折行——它按子项宽度硬切，图文可能一前一后错开，甚至图片单独占一行、文字另起一行。
正确做法是媒体查询里切flex-direction: column，并配align-items: flex-start保持左对齐。这样结构清晰，语义明确，也方便后续加gap控制间距。
- 竖排时图片加
margin-bottom: 0.75rem比靠gap更可控 - 避免用
nth-child判断左右，聊天列表里消息顺序和发送方无关 - 如果要做“我发的消息靠右”，那是每条消息独立设
align-self: flex-end，不是整个容器设justify-content
min-width: 0和display: block这两个细节：前者管文字不撑容器，后者管图片不悬空——没它们，布局看着“差不多”，但一换图、一填长文本就露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
