用 display: flex + align-items: center 可实现头像、文本、按钮垂直居中；头像需设 flex-shrink: 0 和 width/min-width 防缩放变形；文本区用 flex: 1 占满剩余空间并加 min-width: 0 防溢出；按钮应与文本同级并设 flex-shrink: 0；多行文本时需在文本容器内调整对齐而非依赖外层 align-items。
直接用 display: flex + align-items: center 就能稳住头像和文本、按钮三者垂直居中，不需要浮动、定位或额外 wrapper。关键不是“怎么排”，而是“谁该收缩、谁该锁定”。
头像必须设 flex-shrink: 0
否则在小屏或容器变窄时，<img> 会被浏览器自动压缩，导致头像变形或文字挤到下一行。
-
<img>上加width（如40px）或min-width，再配flex-shrink: 0 - 不要只靠
max-width: 100%，它不阻止 flex 缩放 - 如果头像用背景图，记得给容器设
aspect-ratio: 1 / 1防拉伸
文本区域要用 flex: 1 而非 margin-left
硬写 margin-left: 12px 看似简单，但换字体、改字号、加 icon 后极易错位；flex: 1 让文本区域自动占满剩余空间，更健壮。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，能随容器宽度平滑伸缩 - 文本容器内若含多行内容（如用户名+职位），建议加
min-width: 0防止文字溢出截断 - 避免给文本容器设固定
width，否则在响应式场景下会撑破父容器
操作按钮要和文本同级，别塞进文本容器里
常见错误是把“退出登录”按钮放在用户名 <div> 内部，结果按钮被 flex: 1 拉宽、或受文字换行影响位置飘移。
立即学习“前端免费学习笔记（深入）”；
- 结构上保持三者并列：
<img>、<div class="user-info">、<button> - 按钮本身可设
flex-shrink: 0锁定尺寸，避免被压缩 - 若按钮需右对齐（如贴父容器右边缘），别用
justify-content: space-between——它会让文本被顶到中间空白处；应保持默认justify-content: flex-start，靠结构顺序自然排列
最容易被忽略的是：当文本区域含换行内容（比如用户名+时间戳两行）时，align-items: center 会让整块文字垂直居中，头像看起来反而偏高。这时得在文字容器上加 margin-top: auto 或改用嵌套 flex-direction: column 控制内部对齐，而不是调外层 align-items。
