气泡左右停靠靠margin而非justify-content；发送方用margin-left: auto推右，接收方保持margin-left: 0靠左；需父容器display: flex且flex-direction: column，配合box-sizing: border-box、max-width和换行控制。
气泡左右停靠靠的是justify-content还是margin？
靠margin，不是justify-content。Flex容器的主轴对齐只管子元素整体位置，不管单个气泡该左该右——每个气泡得自己“声明立场”。常见错误是给整个消息列表设justify-content: flex-start，结果所有气泡全挤左边，根本分不清谁发的。
- 发送方气泡用
margin-left: auto推到右侧（注意：不是justify-content: flex-end） - 接收方气泡保持默认
margin-left: 0，自然靠左 - 必须确保父容器是
display: flex且子元素是块级（比如div），否则margin自动生效逻辑不触发
为什么align-self在气泡上基本没用？
因为对话气泡通常是单行文本+边框，高度由内容撑开，align-self控制的是交叉轴（垂直方向）对齐，而左右停靠是主轴（水平方向）问题。强行用align-self: flex-end只会让气泡在垂直方向下移，和左右无关。
- 真正影响左右的是主轴上的外边距或
margin-inline-start/end -
align-self只在父容器设了align-items: stretch且子元素高度不一致时才有明显效果 - 移动端iOS Safari对
margin-inline支持较晚（iOS 14.5+），老项目建议坚持用margin-left/margin-right
Flex容器要不要设flex-direction: column？
要，而且必须。对话消息是纵向堆叠的，不用column会导致所有气泡横着排成一行，完全不可读。
- 容器设
display: flex; flex-direction: column;后，每个气泡才是“一列中的一行” - 此时
margin-left: auto才有效——它把当前项在**主轴（竖向）的横坐标**上推到右边界 - 别漏掉
gap（比如gap: 8px），否则气泡之间没间距，视觉粘连
遇到气泡宽度不自适应、文字换行异常怎么办？
本质是min-width和max-width没控住。Flex项默认会收缩，但气泡需要最小宽度保形状、最大宽度防撑破屏幕。
- 接收方气泡加
max-width: 70%，发送方加max-width: 70%; margin-left: auto; - 必须设
word-break: break-word或overflow-wrap: break-word，否则长英文/URL不换行 - 避免对气泡设
width: 100%——它会强制占满父容器，失去左右停靠意义
最易被忽略的是box-sizing: border-box没统一。边框和内边距算进宽高后，max-width才真正可靠；漏掉这句，气泡实际宽度常超预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
