气泡容器必须用 display: flex 控制主轴对齐，不能只靠 margin-left: auto；需用 justify-content 统一对齐头像、气泡、时间戳整体，气泡内文字用 max-width + word-break: break-word，尾巴三角需气泡容器设 position: relative。
气泡容器必须用 display: flex 控制主轴对齐，不能只靠 margin-left: auto
很多人写右对齐用户气泡时直接加 margin-left: auto，结果在 Flex 容器里表现不稳定——尤其当父容器有 flex-wrap: wrap 或内容高度不一时，气泡会意外换行或偏移。真正可控的方式是让每条消息外层（如 .message）设 display: flex，再用 justify-content 驱动头像和气泡整体对齐：
• 用户消息：加 .message.mine { justify-content: flex-end; }
• 对方消息：用 .message.theirs { justify-content: flex-start; }（默认可不写）
这样头像、气泡、时间戳三者作为一个整体移动，不会出现“头像靠右，气泡却卡在中间”的错位。
align-self 只作用于气泡本身，别误用在头像或时间戳上
头像和时间戳是 .message-content 的子元素，而气泡才是需要左右对齐的主体。常见错误是给头像加 align-self: flex-end 想让它靠右，结果头像脱离了气泡的视觉归属。正确结构是：
• .message（flex 容器）→ 包含头像 + .message-content
• .message-content（flex-direction: column）→ 包含头像、气泡、时间戳
• 气泡（.bubble）单独设 align-self: flex-end（用户）或 align-self: flex-start（对方）
这样气泡才真正按语义对齐，头像和时间戳则自然跟随其位置上下排列。
气泡内部文字必须用 max-width + word-break: break-word，不是 width: fit-content
width: fit-content 在 Flex 布局中行为不一致：Firefox 下可能忽略父容器 max-width，iOS Safari 旧版本（16.4 之前）甚至不支持。更稳方案是：
• 气泡容器（.bubble）设 max-width: 80% 和 padding: 12px 16px
• 内部文字容器（如 .bubble > p 或 .bubble span）设 word-break: break-word 和 hyphens: auto
注意：max-width 必须落在文字容器上，否则 align-self 的对齐基准会按缩窄后的宽度计算，导致左右气泡视觉偏移。
尾巴三角定位失效？八成没给气泡容器加 position: relative
伪元素 ::before 或 ::after 的 top/left 是相对于最近的已定位祖先。如果漏掉这句，尾巴就会锚定到 body 或聊天区父容器，滚动或内容变化时立刻飘走。
必须为每条气泡消息的最外层容器（比如 .message.mine .bubble）显式加：position: relative;
再配三角：
• 用户气泡尾巴朝右：.bubble::after { content: ""; position: absolute; right: 100%; top: 12px; border: 6px solid transparent; border-left-color: #007aff; }
• 对方气泡尾巴朝左：.bubble::before { content: ""; position: absolute; left: 100%; top: 12px; border: 6px solid transparent; border-right-color: #f0f0f0; }
别左右都用 ::after，也别用 margin-left: -12px 这类不可控偏移。
立即学习“前端免费学习笔记（深入）”；
真正难的不是画出气泡，而是让所有尺寸、对齐、换行、定位逻辑在不同内容长度、不同 iOS 版本、不同字体渲染下保持一致。每个 position: relative、每个 max-width 的归属层级、每个伪元素的选择器方向，都得严格对应语义——漏掉一个，整条消息就“脱钩”了。
