将项目向左或向右对齐

Question

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

父容器看起来像这样

rec.ondataavailable = e => {
   audioChunks.push(e.data);
   if (rec.state == "inactive"){
     say('message2', rec.mimeType);
     say('message3', e.data.type);

然后在<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; } 我有

app-message

但是由于某种原因，所有内容都向左对齐，我不知道为什么。 the specification

Answer 1

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

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

完全按照我的要求工作。

Answer 2

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

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