应使用服务端提供的方向标识（如is_self或direction字段）动态添加CSS类名message--sent或message--received，配合独立的.message-container flex容器分别设置justify-content: flex-end或flex-start实现左右对齐，避免依赖顺序、data属性或text-align。
怎么用 CSS 类名区分发送和接收消息
HTML 本身没有“发送/接收”语义，必须靠开发者自己加标记。最直接的方式是给每个 <div class="message"> 补一个方向类名，比如 <code>message--sent 或 message--received。别依赖顺序、内容或时间戳来推断方向——服务端返回的数据里就应该带 is_self: true 这类字段，前端只管映射。
- 服务端返回的消息数据必须包含明确的方向标识（如
sender_id对比当前用户 ID，或直接返回direction: "outgoing"） - 渲染时根据该字段动态添加类名：
class="message message--sent"或class="message message--received" - 避免用
:nth-child(odd)这类纯样式方式判断方向——消息可能异步到达、被撤回、或分页加载，顺序不可靠
flex 布局中如何让发送消息右对齐、接收左对齐
用 justify-content: flex-end 和 justify-content: flex-start 是主流做法，但关键在容器结构。不能把所有消息塞进一个 flex 容器再靠子元素自身对齐——那样会导致换行错乱、气泡宽度计算异常。
- 每个消息单独包裹一层
<div class="message-container">，容器设为 <code>display: flex - 发送消息容器加
justify-content: flex-end，接收加justify-content: flex-start - 消息气泡（
<div class="bubble">）设为 <code>max-width: 70%并用margin控制间距，避免撑满整行 - 不要对
.message元素直接设text-align——它不管 flex 子项的主轴对齐 - 类名可复用、可组合：
message--sent message--pending比data-direction="sent" data-status="pending"更易维护 - 工具链（如 Tailwind、UnoCSS）默认只扫描 class，不处理 data 属性
- 测试时用
element.classList.contains('message--sent')比查dataset.direction更稳定，尤其在 SSR hydration 后属性可能被清空 - 消息容器（
.message-container）设padding: 0 12px，统一留白基准 - 气泡自身用
margin: 4px 0控制上下间距，左右不留 margin——靠容器 padding 和 flex 对齐保证位置 - 避免对
.message--sent .bubble单独设margin-right: auto，这会破坏 flex 主轴逻辑，且在 iOS Safari 中偶发渲染错位
为什么用 data-direction 属性不如 class 可靠
data- 属性适合存原始数据，但不适合驱动样式。CSS 选择器对 [data-direction="sent"] 的匹配性能略低，更重要的是：它无法参与 BEM 或 CSS-in-JS 的原子化构建，也不利于后续加动画、状态变体（比如“正在发送中”“已读”）。
移动端适配时容易忽略的 padding 和 margin 冲突
左右对齐后，很多人直接给气泡加 margin-left 或 margin-right 来留白，结果在小屏上气泡贴边、文字换行异常。真正该控制的是容器的内边距和气泡的外边距协同。
立即学习“前端免费学习笔记（深入）”；
