必须用margin-left: auto让发送方消息右对齐、接收方保持默认左对齐，因justify-content作用于整个容器主轴，无法实现“你左我右”的交错效果；父容器需设display: flex且flex-direction: row。
聊天消息左右对齐不能靠 justify-content 统一控制，必须让每条消息自己“选边站”——发送方用 margin-left: auto 推右，接收方保持默认左对齐；同时要确保父容器是 display: flex 且主轴为水平方向（flex-direction: row）。
为什么 justify-content 不适合消息左右分列
它作用于整个容器的主轴，会把所有子项一起推到左边、右边或居中，无法实现“你左我右”的交错效果。常见错误是给消息列表设 justify-content: flex-end，结果全部消息都挤到右侧，完全失去对话感。
-
justify-content控制的是子项在主轴（这里是水平方向）上的整体分布，不是单个元素的立场 - 如果容器
flex-direction: column，那主轴是垂直的，justify-content只影响上下位置，和左右完全无关 - 真正需要的是每个气泡在水平方向上独立声明对齐倾向，
margin-left: auto是最直接、兼容性最好、语义最清晰的方式
发送方消息如何靠右：用 margin-left: auto
这是最稳定可靠的做法，不依赖 align-self（它在水平主轴下无效），也不需要额外 wrapper 元素。
- 发送方消息容器加 class：
.message-sent { margin-left: auto; } - 必须保证该元素是
flex容器的直接子元素，且父容器为display: flex+flex-direction: row - 若气泡设置了
max-width或width，需配合box-sizing: border-box避免宽度计算溢出 - 不要同时设
margin-right: 0——margin-left: auto已隐含右侧贴边，多余声明可能干扰 Safari 表现
接收方消息保持靠左，但要注意这些细节
接收方不需要任何特殊样式，默认行为就是左对齐，但容易被忽略的点恰恰在这里：
- 别给接收方加
margin-left: 0——看似保险，实则可能覆盖用户代理样式或重置逻辑，引发意外偏移 - 如果接收方气泡用了
text-align: right，会导致内部文字右对齐，但气泡本身仍在左侧，视觉错乱 - 当使用
flex-direction: column的外层聊天容器时，消息项必须是块级元素（如div），否则margin-left: auto在某些 iOS Safari 版本中不生效 - 避免对消息项设
align-self——它只影响交叉轴（垂直方向），对左右无作用，还可能干扰垂直居中逻辑
移动端兼容性与布局陷阱
iOS Safari 对 margin-left: auto 在 flex 子项上的支持虽已稳定，但在低版本（iOS 14.5 之前）中，若父容器未显式设 width 或 max-width，可能出现气泡宽度异常撑满的问题。
- 推荐为每条消息容器统一设
max-width: 80%（发送方可略宽，如85%），并加word-break: break-word防止长链接溢出 - 不要依赖
align-items: flex-start来“修正”左右对齐——它只控制垂直方向，且会强制所有消息顶部对齐，破坏气泡底部时间戳的自然错落 - 若使用伪元素（如小三角）定位，注意
margin-left: auto会让绝对定位的参考框变为右边界，此时left: -8px要改用right: -8px
真正关键的不是“怎么写对”，而是“在哪一层写”：左右对齐逻辑必须落在每条消息的直接容器上，而不是外层聊天区或消息列表；一旦层级错位，再精细的 margin 或 align-self 都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
