聊天气泡左右分布的本质是每个气泡通过margin-left:auto或margin-right:auto自主决定对齐，容器保持flex-direction:row以维持自然阅读流；使用row-reverse会导致DOM顺序颠倒、圆角错位、文本对齐异常。
聊天气泡左右分布的本质是「内容流向」与「主轴方向」的配合
不是简单给容器加 flex-direction: row-reverse 就能让气泡自动分左右——它只会把所有子元素顺序翻转，导致自己发的消息全堆在左边、别人的消息全挤在右边，完全反逻辑。真正起作用的是：每个气泡自身决定对齐方式，而容器用 flex-direction: row（默认）保持自然阅读流，再配合 justify-content 或 margin-left/auto 控制单个气泡位置。
为什么 row-reverse 容易让气泡“全跑偏”
当你对整个消息列表容器设置 flex-direction: row-reverse，所有 <div class="bubble"> 会按 DOM 顺序倒着排列。如果 DOM 是「对方消息→自己消息→对方消息」，渲染出来就变成「对方消息←自己消息←对方消息」，全部贴右，失去左右区分。更麻烦的是，文字方向、图标位置、边框圆角都会跟着主轴反转，<code>border-top-right-radius 变成左上，视觉错乱。
- 错误写法：
.chat-list { flex-direction: row-reverse; } - 后果：气泡顺序颠倒、文本对齐异常、圆角方向错位、
text-align: right失效 - 正确思路：容器保持
flex-direction: row，靠子元素的margin-left: auto（自己发的）或margin-right: auto（对方发的）推到一侧
左右气泡的两种可靠实现方式
推荐用 CSS 类区分身份，避免 JS 动态改样式带来的重排风险：
- 对方气泡：
.bubble.received { margin-right: auto; max-width: 70%; } - 自己气泡：
.bubble.sent { margin-left: auto; max-width: 70%; } - 共用基础样式：
.bubble { align-self: flex-start; background: #eef2f7; border-radius: 18px 18px 18px 4px; padding: 10px 14px; } - 注意：不要给容器设
justify-content，否则会覆盖margin-auto的定位效果
移动端适配和圆角细节容易被忽略
左右气泡的圆角不能写死，必须按发送方动态切换。比如自己发的气泡应该左下/左上圆角小、右下/右上大，对方则相反。直接写 border-radius: 18px 18px 18px 4px 是错的——它在 row-reverse 下会翻转含义，且不响应 RTL（从右向左语言）环境。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：用逻辑属性，如
border-start-start-radius: 4px;+border-end-end-radius: 18px;（需检查浏览器支持） - 兼容方案：为两类气泡分别定义圆角：
.sent { border-radius: 18px 18px 18px 4px; }，.received { border-radius: 18px 18px 4px 18px; } - 关键点：圆角值必须和气泡实际所处侧边严格对应，而不是“看起来像就行”
真正难的不是让气泡分左右，而是让它们在不同屏幕宽度、不同文字长度、不同语言方向（LTR/RTL）下都保持语义正确——这时候硬套 row-reverse 只会让问题更隐蔽。
