align-items设为flex-start使头像顶部与文字首行基线平齐；文字容器需display: flex/inline-flex；头像用margin-right而非gap以保兼容；文字区用flex: 1撑满，时间戳用margin-left: auto右对齐；多行截断需-webkit-box+line-clamp+overflow: hidden；img头像加vertical-align: top或display: block防底部留白。
flex布局里align-items设成flex-start才能对齐头像顶部
微信对话列表的头像和文字不是垂直居中对齐的，而是头像顶部和文字第一行基线基本平齐。如果用默认的align-items: center，头像会被拉高，文字看起来“下沉”，尤其在多行文字时更明显。
-
align-items: flex-start让头像和文字块都按顶部对齐，更接近原生表现 - 文字容器必须是
display: flex或display: inline-flex，否则align-items不生效 - 避免给文字容器设
vertical-align: middle——这是inline元素的老办法，在flex里反而干扰对齐
左侧头像用margin-right而非gap，兼容性更稳
gap在flex容器上虽简洁，但iOS Safari 14.5以下、Android WebView旧版都不支持，而微信内嵌浏览器常卡在这些版本。直接用margin-right控制头像和文字间距，可控且无兼容风险。
- 给头像元素加
margin-right: 8px（或12px，按设计稿） - 不要给整个flex容器设
gap，尤其当右侧文字区域还包含时间戳等子元素时，gap会把所有子项都撑开 - 如果用
gap，务必加@supports (gap: 8px)条件判断回退
右侧文字区域必须用flex: 1撑满剩余空间
微信列表项宽度是动态的，头像固定宽（如40px），其余全归文字区域。不用flex: 1，文字会收缩包裹内容，导致时间戳右贴边失败、多行文字换行异常。
- 文字外层容器设
flex: 1，它会自动填满头像右侧所有可用空间 - 内部时间戳用
margin-left: auto实现右对齐，别用text-align: right——那会让整段文字右对齐，破坏消息标题左对齐逻辑 - 避免给文字容器设
width: calc(100% - 48px)，响应式下会和flex冲突，且维护成本高
多行文字截断要配合display: -webkit-box和-webkit-line-clamp
微信对话列表里，消息预览通常是单行或两行截断。CSS的line-clamp在现代浏览器没问题，但Android UC、部分QQ浏览器仍需-webkit前缀，且必须搭配display: -webkit-box才生效。
立即学习“前端免费学习笔记（深入）”；
- 文字内容容器加：
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; - 不能只写
line-clamp，标准属性名line-clamp目前仍需前缀支持 - 别忘了设
overflow: hidden，否则截断无效；也别设height固定值，会和flex高度计算打架
实际最易被忽略的是：头像元素本身若用了img标签，记得加vertical-align: top或display: block，否则图片默认vertical-align: baseline会在底部留白，哪怕flex设了flex-start也会偏移几像素。
