flex布局实现头像、气泡、时间戳垂直堆叠与左右对齐的关键是：外层.message设flex控制头像位置，内层.message-content设flex-column垂直排列三者，气泡用max-width和margin-auto实现左右对齐并留出头像空间，时间戳独立置于底部。
用 Flex 布局把头像和气泡垂直堆叠、左右对齐，关键不是“怎么排”，而是“谁包谁、谁设 flex、谁加 margin”——顺序错了，头像就悬空，时间戳就错位，气泡尾巴就贴不上边。
头像 + 气泡 + 时间戳三层结构要分清容器层级
每条消息用一个 .message 作为最外层容器（display: flex），内部再套一层 .message-content（display: flex + flex-direction: column）来垂直排列头像、气泡、时间戳。别把头像直接塞进气泡里，也别让时间戳写在气泡内部。
-
.message：设
display: flex，根据消息方向决定头像在哪边 —— 用户消息头像放右，对方消息头像放左 -
.message-content：设
display: flex; flex-direction: column;，把头像、气泡、时间戳从上到下自然排列，不用<br>或 margin-top 模拟间距 - 头像用
<img>或占位符，固定宽高（如 36px），设align-self: flex-start确保不随气泡宽度拉伸
左右消息的头像位置靠 flex 主轴控制
用户消息（mine）头像在右侧，对方消息（theirs）头像在左侧，靠 justify-content 和子项 margin 配合实现，不依赖 float 或 absolute：
- 用户消息：
.message.mine设justify-content: flex-end，头像默认左对齐，但容器右对齐，头像就自动靠右 - 对方消息：
.message.theirs设justify-content: flex-start（默认值，可不写），头像自然靠左 - 如果头像需要微调（比如离气泡近一点），给头像加
margin-left: auto（对方消息）或margin-right: auto（用户消息），比写死 px 更适配响应式
气泡本身要留出头像空间，不能撑满整行
气泡容器（.bubble）必须设 max-width: 80%，并配合圆角差异化和尾巴定位：
- 用户气泡加
margin-left: auto实现右对齐；对方气泡保持默认左对齐，或显式加margin-right: auto - 用户气泡去掉左上圆角：
border-top-left-radius: 0；对方气泡去掉右上圆角：border-top-right-radius: 0 - 气泡容器设
position: relative，尾巴用::before/::after绝对定位，left/right 偏移量（如 -12px）要与头像尺寸协调，避免视觉割裂
时间戳始终外置，对齐方式跟随消息方向
时间戳是独立子元素，放在 .message-content 最底部，不嵌在气泡里：
- 用户消息的时间戳用
text-align: right或margin-left: auto靠右 - 对方消息的时间戳用
text-align: left或默认左对齐 - 统一设
font-size: 12px; color: #999; margin-top: 4px;，避免干扰气泡主视觉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
