最轻量可控方案是display: flex+flex-direction: column容器内，每条消息用align-self: flex-start（ai）或flex-end（用户）独立控制左右对齐，配合max-width、非对称border-radius及word-break: break-word确保长内容不撑破。
直接用 display: flex + align-self 就能搞定左右气泡，不需要浮动、绝对定位或 JS 计算——这是目前最轻量、最可控的方案。
用 flex-direction: column 布局消息流
每条消息（无论用户还是 AI）都作为独立 div 放进一个垂直排列的容器里。关键不是让“整列”左右分，而是让“单条消息”自己决定对齐方向：
-
flex-direction: column确保消息从上到下堆叠，天然符合对话时序 - 容器必须设
width或max-width，否则align-self在无约束宽度下可能失效 - 避免给消息元素设
width: 100%，它会撑满父容器，让align-self失去意义
用 align-self 控制单条消息左右位置
用户消息靠右、AI 消息靠左，本质是让子元素脱离默认居左行为。这里容易误用 justify-content 或 text-align：
- 用户消息加
align-self: flex-end，AI 消息加align-self: flex-start - 不要用
margin-left: auto模拟右对齐——它在 flex 容器中不可靠，尤其当消息内容换行时表现异常 - 如果消息内容过长导致折行，
align-self仍只作用于整块盒子，不会影响内部文字对齐；文字对齐需单独用text-align
气泡样式必须配合 max-width 和 border-radius
光有左右对齐还不够，气泡得有呼吸感。这里几个参数组合直接影响视觉合理性：
-
max-width: 80%是常用安全值，既留出边距，又避免在小屏上溢出 -
border-radius: 12px 12px 12px 2px这类非对称圆角能让用户气泡右下角更尖锐，模拟真实聊天软件（如微信），AI 气泡则建议四角均匀，如12px - 阴影用
box-shadow: 0 1px 4px rgba(0,0,0,0.08)足够，太重会干扰文字可读性 - 背景色对比要明确：用户用深色（如
#419fff），AI 用浅色（如#daedff），别用相近灰度
真正难的不是写出来，而是当消息里嵌入代码块、图片或长链接时，max-width 和 word-break 的配合是否鲁棒——这时候得加 word-break: break-word 和 overflow-wrap: break-word 双保险，不然一行超长 URL 会直接撑破布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
