聊天消息气泡简单实现

weixin_52707625

于 2023-07-21 22:04:52 发布

阅读量537

点赞数 1

分类专栏： css 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_52707625/article/details/131860856

版权

本文介绍了如何通过CSS的flex布局实现聊天消息气泡的效果。通过设置不同方向的flex布局，可以轻松创建出用户和对方的聊天消息气泡，并使其在页面上正确对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用一份代码实现聊天消息气泡，效果如下

在这里插入图片描述

实现思路

通过flex弹性布局的反转实现，页面代码如下

<div class="message">
  <div class="msg-box" :class="isMe && 'msg-box-me'">
    <!-- 头像 -->
    <div class="avatar">
      <img src="../assets/image/avatar1.jpeg" alt=

最低0.47元/天解锁文章