最直接可控的方式是父容器设flex-direction: column，子项用align-self控制左右对齐；气泡需加position: relative以定位尾巴，max-width应设在文字容器内，圆角需不对称避免与尾巴脱节。
用 flex-direction: column + align-self 是最直接、最可控的方式，别碰 justify-content 或 float ——它们要么无效，要么在滚动/缩放时出错。
父容器必须设 flex-direction: column
这是前提。没有它，align-self: flex-start 和 align-self: flex-end 都不会左右对齐，而是上下对齐（因为默认主轴是水平的）。很多开发者复制代码后发现气泡不动，八成是漏了这句。
- 父容器（如
.chat-messages）需声明：display: flex; flex-direction: column; - 不要加
justify-content控制左右——它只影响子项在主轴（此时是垂直方向）的位置，跟左/右无关 - 如果父容器高度没撑开（比如内容少、没设
min-height），align-self: flex-end可能“看起来没效果”，其实是它真贴到了容器底部边缘
每条气泡自己决定靠哪边：用 align-self 而非全局规则
左右分流不是靠奇偶序号或文本内容判断，而是每条消息根据发送方动态加 class，再由 CSS 精确控制。
- AI 消息（左）：加 class
msg-ai，配.msg-ai { align-self: flex-start; } - 用户消息（右）：加 class
msg-self，配.msg-self { align-self: flex-end; } - 千万别用
:nth-child(odd)——群聊里发两条用户消息，第二条就错位到左边 - 也别依赖
margin-left: auto做右对齐：它在 iOS Safari 旧版中兼容性不稳，且和align-self混用可能冲突
气泡容器必须加 position: relative 才能画尾巴
伪元素 ::before 或 ::after 的定位基准，是最近的已定位祖先。不加这句，尾巴会锚定到 body 或外层 flex 容器，一滚动就飘走。
- 每个气泡元素（如
.msg-ai或.msg-self）都要加position: relative - 尾巴用 border 三角方案：
content: ""+position: absolute+ 单边有色 + 三边transparent - 朝左尾巴用
::before，朝右用::after，避免同一条消息两个伪元素打架 - 定位别写死
left: 20px；用right: 100%+top: 12px（对应气泡内边距）更稳定
圆角、边距和最大宽度怎么不影响对齐
align-self 计算的是元素盒模型的边界，所以 margin 和 max-width 放错位置会偏移视觉对齐点。
-
max-width必须设在气泡内部文字容器上（如.msg-bubble > span），而不是消息项本身 - 左右边距统一用
margin-left（左气泡）或margin-right（右气泡）控制，别混用margin-left和margin-right在同一类上 - 圆角建议不对称：
border-radius: 18px 18px 18px 4px（左气泡）或4px 18px 18px 18px（右气泡），否则尾巴根部会和圆角脱节 - 尾巴若被气泡的
box-shadow遮住，加一句z-index: 1即可，不用调整个体层级
真正容易被忽略的，是 position: relative 必须加在每条气泡上，而不是聊天区域父容器——前者失效，后者根本不管用。还有就是 content: "" 这行看似无用的声明，漏掉它，尾巴连影子都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
