flex实现头像+文本左对齐布局的关键是display: flex + align-items: center，头像设flex-shrink: 0，文字区域用flex: 1，禁用justify-content: space-between，改用默认flex-start。
Flex实现头像+文本左对齐布局的关键写法
直接用 display: flex + align-items: center 就能搞定，不需要浮动、定位或额外容器。核心是让头像和文字在同一行居中对齐，且头像靠左、文字自然贴右。
常见错误是忘了设 align-items: center，结果头像顶部对齐、文字基线悬空，看着像错位；或者给文字容器加了 margin-left 硬推，一换字体或字号就崩。
-
flex容器必须设align-items: center，否则默认stretch，头像会被拉高 - 头像
<img>建议设flex-shrink: 0，防止小屏下被压缩变形 - 文字部分用
flex: 1占满剩余空间，比固定margin-left更健壮
为什么不用 justify-content: space-between
它看似“头像左、文本右”，但实际会把文本整体推到最右边界，中间留一大片空白——这不是摘要组件要的效果。摘要需要头像紧邻文字左侧，文字自身左对齐，只是整体在容器里靠左排列。
真正该用的是 justify-content: flex-start（默认值），再配合 flex: 1 让文本区域自动撑开，形成“头像定宽、文本自适应”的稳定结构。
- 用
space-between后，哪怕只有一行字，也会被顶到最右，破坏阅读流 - 如果父容器有 padding，
space-between还会让头像离左边缘过近，显得拥挤 - 移动端缩放时，
flex: 1能随容器宽度平滑收缩，space-between则容易导致文字换行异常
头像尺寸不一致时的兼容处理
用户上传的头像常有不同比例（圆形/方形/裁剪不一），直接设 width/height 容易拉伸或留白。稳妥做法是统一用 aspect-ratio: 1 / 1 + object-fit: cover。
注意 Safari 15.4+ 才支持 aspect-ratio，老版本需回退为 padding-top: 100% 的 hack 方式，但现代项目可放心用。
-
width: 40px; height: 40px; border-radius: 50%只对正方形图安全，矩形图会严重变形 -
object-fit: cover必须配width和height才生效，单独写没用 - 如果头像加载失败，记得加
alt和兜底背景色，避免布局塌陷
文本摘要换行与截断的实操控制
摘要文字通常要单行省略（text-overflow: ellipsis）或最多两行显示。这两者和 Flex 配合时容易失效，因为 white-space: nowrap 会破坏 Flex 的换行逻辑，而 display: -webkit-box 又和 Flex 不兼容。
推荐方案：保持 flex: 1，对文字容器单独设 min-width: 0（防止长单词撑破布局），再用 text-overflow 或 -webkit-line-clamp 控制。
- 不加
min-width: 0时，含长 URL 的摘要可能把头像挤出视口 -
line-clamp需要display: -webkit-box，此时必须关掉该容器的flex属性，另起一层 wrapper - 服务端返回的摘要若含 HTML 标签，前端要用
textContent渲染，避免innerHTML引发 XSS 或布局错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
