用Flex实现H5仿微信聊天气泡的核心是主轴方向控制左右分布（left用row、right用row-reverse）和align-items: flex-end使头像与气泡底部对齐；气泡设flex: 1、max-width: 70%、word-break: break-word及min-height: 40px；头像统一40px圆角并flex-shrink: 0；时间戳单独居中显示；新增消息后setTimeout延迟30ms调用scrollTo确保滚动到底部。
用 Flex 实现 H5 仿微信聊天气泡，核心是靠 主轴方向控制左右分布 和 交叉轴对齐保证文字底部贴齐。H5 环境下渲染稳定、兼容性好，不需要绕原生限制，比 App 端简单得多。
左右气泡的容器结构要分开写
每条消息用一个外层容器包裹头像和气泡，根据发送方决定 class（比如 msg-item left 或 msg-item right），再统一设置 flex 行为：
-
左气泡（他人发）：
display: flex; flex-direction: row;，头像在左、气泡在右；头像加margin-right: 8px -
右气泡（自己发）：
display: flex; flex-direction: row-reverse;，头像在右、气泡在左；头像加margin-left: 8px - 两个方向都设
align-items: flex-end;，让头像底部与气泡底部对齐（不是居中！）
气泡本身要带弹性约束
气泡区域（文字所在 view）不能写死宽度，得靠 flex 占位 + 最大宽度防溢出：
- 给气泡元素设
flex: 1;，让它自动撑满剩余空间 - 加
max-width: 70%;（iOS/Android 都适配的值），避免长文本或链接把整行拉宽 - 必须设
word-break: break-word;，否则无空格长串（如 URL、Base64）会撑破边界 - 建议加
min-height: 40px;，防止空消息或纯表情时高度塌缩不一致
文字样式和细节补全
微信气泡看着简单，实际细节影响体验：
- 文字
padding: 10px 14px;，上下左右留白均匀，别顶边 - 左气泡背景用浅灰（如
#f2f2f2），右气泡用蓝（如#09bb07），圆角统一border-radius: 18px; - 头像统一尺寸（如
width: 40px; height: 40px;），border-radius: 50%;，并设flex-shrink: 0;防压缩 - 如果支持时间戳，可放在气泡下方单独一行，用
text-align: center; font-size: 12px; color: #999;
滚动到底部要主动触发
H5 中 scroll-view 或普通 div 滚动到底部，不能只靠 CSS，得靠 JS：
- 每次新增消息后，调用
scrollTo({ top: el.scrollHeight, behavior: 'smooth' }); - 若用原生
<div class="chat-list">，可先获取 DOM：const list = document.querySelector('.chat-list');，再执行滚动 - 为防抖动，建议加个
setTimeout延迟 30ms 再滚动，确保 DOM 渲染完成
