如何根据条件为div分配不同SCSS类实现聊天消息左右布局

首先修正模板里的小错误：Ionic模板中不需要用this.访问组件变量，把this.message.user === this.user改成message.user === user即可。

接下来通过Flex布局精准实现左右对齐，核心是给每个消息项设置独立的flex容器，再根据消息归属控制气泡位置：

1. 优化后的HTML结构 #

<div *ngFor="let message of messages" class="msg-container">
  <div [class]="message.user === user ? 'msg-bubble mine' : 'msg-bubble other'">
    <ion-text [color]="message.user === user ? 'tertiary' : 'primary'">
      <b>{{ message.user }}: &nbsp;</b>
    </ion-text>
    <ion-text [color]="message.user === user ? 'secondary' : 'light'">
      {{ message.text }}
    </ion-text>
  </div>
</div>

（用动态类名替代ngIf+else，结构更简洁易维护）

2. 关键CSS样式 #

.msg-container {
  display: flex;
  width: 100%;
  margin: 8px 12px;
}

.msg-bubble {
  max-width: 75%;
  padding: 10px 16px;
  border-radius: 22px;
  line-height: 1.5;
}

.mine {
  margin-left: auto; /* 强制将自身消息推至右侧 */
  background-color: #6815ec;
}

.other {
  margin-right: auto; /* 保持他人消息在左侧 */
  background-color: #333333;
}

原有方案失效原因 #

你之前的Flex布局可能加错了层级：直接给ion-item加flex会触发整个列表项的全局偏移，而正确的做法是给每个消息的外层容器设置display:flex，通过margin-left:auto/margin-right:auto精准控制气泡位置。另外ion-item自带默认内边距和对齐样式，改用普通div作为消息容器能避免样式冲突。

内容的提问来源于stack exchange，提问作者Marcel