聊天气泡左右对齐的本质是 flex 容器内单个子项的交叉轴对齐控制
直接说结论：align-self 本身不决定“左/右”，它只在 flex 容器设为 flex-direction: column 时，才对气泡的垂直位置起作用；真正控制左右（主轴方向）对齐的是 margin-left: auto 或 margin-right: auto，或者用 justify-content 配合不同容器。很多人一上来就猛调 align-self，结果发现没反应——因为默认 flex-direction: row，align-self 管的是上下，不是左右。
-
align-self: flex-start在flex-direction: column下让气泡贴顶，在row下让它贴左（但仅当父容器有高度约束且存在交叉轴空间时才明显） - 想让某个气泡靠右？给它加
margin-left: auto；靠左？默认即可，或显式写margin-right: auto - 不要给所有气泡统一设
align-self，它适合微调单个气泡的上下偏移（比如带时间戳的小字需要下压一点），不是左右分流的主力
用 margin-auto 实现左右分流最稳，且兼容性远超 justify-content: space-between
常见错误：把所有气泡塞进一个 flex 容器，然后幻想用 justify-content: space-between 让奇数行左、偶数行右——这根本不可控，文本长度不同、换行次数不同，会导致错位和挤压。
- 正确做法是每个气泡自己是一个
div，父容器设display: flex; flex-direction: column; - 对方气泡加
align-self: flex-start（视觉上靠左），自己气泡加align-self: flex-end（视觉上靠右）——但这仍依赖交叉轴，真正可靠的是：对方气泡不加样式，自己气泡加margin-left: auto -
margin-left: auto兼容 IE10+，而justify-content的复杂分布逻辑在老浏览器里容易崩，尤其嵌套 flex 时 - 如果气泡内部要右对齐文字，记得同时设
text-align: right，否则箭头和文字会错位
align-self 值选 flex-start / flex-end 时，必须确认父容器是 column 方向
很多开发者复制了“别人家的聊天气泡代码”，发现 align-self: flex-end 没效果，查半天才发现父容器是 flex-direction: row ——此时 align-self 控制的是气泡在容器高度内的上下位置，跟左右完全无关。
- 检查父容器是否写了
flex-direction: column；没写就默认row，align-self对左右无感 - 即使设了
column，若父容器没设height或内容没撑开高度，align-self: flex-end也可能看起来“没动”，因为它只是把元素塞到交叉轴末尾，而末尾可能就是底部边缘 -
align-self: center在column下会让气泡垂直居中，这在单条消息预览场景有用，但聊天列表里慎用，会破坏时间流顺序感
箭头定位别硬靠 transform，用伪元素 + 边框三角更轻量
左右对齐之后，气泡尾巴（箭头）的位置常被忽略。有人用 transform: translateX() 微调，结果在缩放或高 DPI 屏幕下像素模糊，或响应式断点时偏移错乱。
立即学习“前端免费学习笔记（深入）”；
- 对方气泡箭头在右：用
::after伪元素，border-left: 8px solid #e0e0e0; border-top: 8px solid transparent; border-bottom: 8px solid transparent;，再margin-right: -8px拉回 - 自己气泡箭头在左：同理，用
border-right，再margin-left: -8px - 别给箭头设
width/height，纯边框三角不占文档流，也不触发重排，比绝对定位 + transform 更稳 - 如果气泡圆角用了
border-radius，箭头伪元素也要同步加border-radius（只对对应角），否则接缝露白
最易被忽略的一点：左右气泡的 max-width 要分别设，而不是共用一个值。对方气泡建议 max-width: 70%，自己气泡可以放宽到 max-width: 85%，否则长消息会强制换行过碎，影响阅读节奏。
