用 flex 布局实现头像左固定、昵称右自适应：父容器设 display: flex、align-items: center、gap；右侧.info 加 flex: 1 占满剩余空间；h3 清 margin、调 line-height，p 控制换行与省略。
用 Flex 布局实现个人中心「头像 + 昵称右侧自适应」，关键是让头像固定尺寸、昵称区域自动撑满剩余空间，并保持垂直居中和文字对齐稳定。不需要浮动、不用 JS 计算高度，纯 CSS 即可完成。
结构必须语义清晰、顺序合理
HTML 中头像放在左侧，昵称及信息区域放在右侧，且二者为同级子元素：
- 头像用
或带背景图的
，不嵌套在列表或多余容器里- 昵称区域用一个
包裹 （昵称）和 （简介/状态等），避免用无语义的 堆叠- 父容器不要加 float、position: absolute 等干扰布局的样式
核心 CSS：三行代码定乾坤
给外层容器（如 .profile-header）设置：
- display: flex —— 激活弹性布局
- align-items: center —— 所有子项在交叉轴（垂直方向）居中对齐
- gap: 12px —— 控制头像与右侧区域之间的间距（替代 margin，更干净）
再给右侧信息区加 flex: 1，它就会自动占据剩余所有宽度，无论屏幕多窄都保持自适应。
昵称文字对齐与换行控制
右侧区域默认是块级行为，需微调文字表现：
- 昵称 设 margin: 0; line-height: 1.2，避免默认上下边距干扰高度
- 简介文字用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis 防止折行错位（尤其在小屏）
- 若需多行简介，改用 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical
响应式适配小屏的要点
当宽度不足时，可让昵称区域收缩、头像略缩小，而非换行破坏结构：
- 头像加 max-width: 100%; height: auto;，配合 object-fit: cover 保形
- 媒体查询中对小屏降低 gap 和字体大小，例如：
@media (max-width: 480px) { .profile-header { gap: 8px; } .info h3 { font-size: 1rem; } } - 不建议在小屏把布局改成「头像上、昵称下」——那会破坏“右侧自适应”的原始意图，也增加维护成本
- 昵称区域用一个
