将项目左对齐或右对齐答案

【问题标题】：Align items to either left or right将项目左对齐或右对齐
【发布时间】：2021-02-21 18:18:08
【问题描述】：

我正在编写聊天应用程序，我想将消息左对齐或右对齐，就像在 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;
}

然后在app-message里面我有

<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;
}

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

【问题讨论】：

尝试使用float left 和right。也许会有所帮助。
它没有，实际上消息现在是在一行中显示的。
你能创建一个关于它的堆栈闪电战吗？因为你需要分离消息的类别。

标签： html css angular twitter-bootstrap flexbox

【解决方案1】：

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

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

完全按照我的意愿工作。

【讨论】：

【解决方案2】：

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

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

【讨论】：