.message容器必须设display: flex，否则头像、气泡、时间戳无法正确对齐；头像位置由justify-content控制，气泡需嵌套在.message-content中并用max-content+max-width控制宽度，三角箭头须用position: relative+transform居中。
flex布局中.message容器必须设display: flex，否则头像和气泡无法对齐
很多初学者把头像、气泡、时间戳全塞进一个
里，然后只给气泡加
margin-left: auto，结果头像悬空、气泡偏移——根本原因是缺少外层display: flex作为对齐基准。头像位置（左/右）由.message的justify-content控制：.message.mine用justify-content: flex-end把头像推到右侧，.message.theirs保持默认justify-content: flex-start即可。
注意：头像本身不要设float或position: absolute，它只是.message的一个子元素，靠align-self: flex-start确保不被气泡高度拉伸变形。
气泡容器必须嵌套在.message-content里，且设flex-direction: column
错误做法是把头像直接写在气泡内部，或把时间戳塞进气泡的::after里——这样会导致时间戳随气泡内容高度变化而错位。正确结构是：
-
.message（外层 flex 容器）→ 包含头像 +.message-content -
.message-content→display: flex; flex-direction: column;，再依次放头像、.bubble、时间戳 - 时间戳是独立子元素，不是伪元素，也不在
.bubble内部
这样三者自然从上到下堆叠，间距靠 flex 间隙（gap）或 margin 控制，不用margin-top硬调。
气泡宽度用max-content + max-width，别碰fit-content
width: fit-content在 Firefox 和某些旧版 Safari 中行为不一致，尤其在 flex 容器里可能退化为auto导致宽度塌陷；而width: max-content能真实反映文字最长行的自然宽度，配合max-width: 280px（移动端建议85vw）才是可靠组合。
换行策略必须同步调整：
- 单行短文本：
white-space: nowrap+overflow-wrap: anywhere - 多行长文本：
white-space: normal+overflow-wrap: break-word（不是word-break: break-word，后者已废弃） - 绝对不要用
width: 100%或width: 200px，会撑破窄屏或留白过多
三角箭头必须用position: absolute + transform居中，不能靠left: 50% + margin-left
用left: 50%; margin-left: -6px看似简单，但气泡宽度一变，箭头就偏了。真正稳定的做法是：
- 气泡容器设
position: relative - 箭头伪元素（
.bubble::before）设position: absolute; left: 50%; top: 100%; transform: translateX(-50%) - 边框画三角统一用
border-width: 6px 6px 0 0; border-color: #e0e0e0 transparent transparent transparent
这个transform让箭头自身宽度参与居中计算，无论气泡是 80px 还是 280px，箭头始终钉在底部正中——这是左右消息复用同一套样式的关键。
最容易被忽略的是：所有伪元素箭头都依赖父容器的position: relative，漏掉这句，absolute就会向上逐级找定位祖先，一旦中间有overflow: hidden或transform，箭头直接消失或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
