Html 将项目向左或向右对齐

我正在编写聊天应用程序，我想将消息向左或向右对齐，就像在Messenger或任何其他类似应用程序中一样

父容器如下所示

<div class="middle-box border-top border-bottom" #chatContainer>
    <app-message *ngFor="let message of messages" [message]="message" [userMessage]="isUserMessage(message)"></app-message>
</div>

.middle-box {
  min-height: 550px;
  max-height: 550px;
  overflow-y: auto;
}

但由于某种原因，所有东西都是左对齐的，我不明白为什么。

工作完全符合我的要求。

---

尝试使用

浮动

左

和

右

。也许这会有帮助。它没有，事实上，消息现在显示在行中。你能创建一个关于它的stackblitz吗。因为您需要分离消息的类别。

<div *ngIf="userMessage" class="row no-gutters user-message-box">
    <div class="user-message">
        {{message.messagePayload}}
    </div>
</div>


<div *ngIf="!userMessage" class="row no-gutters message-box">
    <div class="message">
        {{message.messagePayload}}
    </div>
</div>


.user-message {
    min-width: 60px;
    padding: 10px 15px;
    background: #eee;
    margin: 10px 10px;
    border-radius: 10px;
  }
  
.message {
    min-width: 60px;
    padding: 10px 15px;
    background: #0a4172;
    color: white;
    margin: 10px 10px;
    border-radius: 9px;
}

.user-message-box {
  display: flex;
  justify-content: left;
}

.message-box {
  display: flex;
  justify-content: right;
}

.user-message-box {
  display: flex;
}

.message-box {
  display: flex;
  justify-content: flex-end;
}

.user-message-box {
  display: flex;
 float: left;
width: 100%;
}

.message-box {
  display: flex;
  float: right;
}