Ionic Angular聊天室自身消息头像换行布局错误如何解决

Ionic的栅格系统总宽度按12等份划分，同一行内所有列的size+offset总和不能超过12，否则超出的列会自动换行显示。
你的代码中自己发送消息的渲染逻辑存在核心问题：

• 列宽度总和溢出：自己发消息时，先渲染了size=3的头像列，后续消息列又设置了offset=3+size=9，三者相加为15，远超12的总宽度，直接导致消息列被挤到第二行
• 布局顺序错误：自己发送的消息头像应该靠右显示，你把头像列放在了消息列左侧，和他人消息的布局方向一致，不符合常规聊天UI逻辑
• 额外样式问题：自己发送的消息气泡背景是深色主题色，但用户名样式写死了黑色，会导致文字看不清；圆角设置为20%显示效果怪异，他人消息的时间文字用浅灰色在浅灰背景上辨识度低。

1. 调整消息行的列渲染顺序，删除消息列上多余的offset配置，保证同一行内列size总和为12：他人消息头像在左、消息在右；自己发送的消息消息在左、头像在右。
   修正后的ion-grid区域代码如下：

<ion-grid>
  <ion-row *ngFor="let message of messages" class="ion-align-items-center">
    <!-- 他人消息头像：左侧显示 -->
    <ion-col size="2" *ngIf="!message.myMsg">
      <img [src]="message.userphoto" class="img-thumbnail" width="50" height="50">
    </ion-col>
    <!-- 消息气泡列 -->
    <ion-col size="10" class="message"
      [ngClass]="{ 'my-message': message.myMsg, 'other-message': !message.myMsg }">
      <b [style.color]="message.myMsg ? 'white' : 'black'">{{ message.fromName }}</b> 
      <img style="margin-left:5px;width:17px;" src="assets/antenna.png" alt="">
      <br>
      <span>{{ message.msg }}</span>
      <div class="time ion-text-right">
        <br>{{ message.createdAt?.toMillis() | date:'short' }}
      </div>
    </ion-col>
    <!-- 自己发送的消息头像：右侧显示 -->
    <ion-col size="2" *ngIf="message.myMsg">
      <img [src]="message.userphoto" class="img-thumbnail" width="50" height="50">
    </ion-col>
  </ion-row>
</ion-grid>

2. 调整CSS样式，优化气泡显示效果，修正文字颜色和圆角：

.message {
    padding: 10px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    white-space: pre-wrap;
    max-width: 80%;
}
 
.my-message {
    background:  var(--ion-color-primary);
    color: white;
    border-radius: 12px;
    margin-left: auto;
}
 
.other-message {
    background:  lightgray;
    color: black;
    border-radius: 12px;
    margin-right: auto;
}

.time {
    color: #dfdfdf;
    float: right;
    font-size: small;
}
.other-message .time {
  color: #666;
}

调整后自己发送的消息会靠右对齐，头像在右侧，和他人消息布局对称，不会再出现换行问题。

内容的提问来源于stack exchange，提问作者AZZOUNI MOHAMED AMIR