Css 在一个父Div中左右对齐弹性列项目

在Angular应用程序中，我试图以定制的垂直方式堆叠引导

toast

元素，即将某些

toast

放在页面左侧（

align items start

style），将某些

toast

放在页面右侧（

align items end

style），但不幸的是，它们都在一个父项下

Div

代码如下：

父组件模板

预期效果：如果选择项向右对齐，则它们应该与右边框对齐，而不是与左边框对齐。但其他项目仍保持左边框对齐。

有可能用Css的方式实现吗？
我尝试了很多flex属性，但运气不佳，有人能帮忙吗

我还创建了一个stackblitz:
使用这个


getStyle（）：对象{
如果（this.comment.username==“right”）{
返回{
边距：“10px 0 0px自动”
};
}
}
在您提供的stackblitz中，我做了以下更改：-

工作堆栈闪电战：-

app.component.css:-

p {
  font-family: Lato;
}
.toast-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.justify-content-end {
  justify-content: flex-end;
}
.my-toast {
  display: flex;
  width: 100%;
}

app.component.html

<div class="toast-container">
  <div class="my-toast" [ngClass]="{'justify-content-end': comment?.username === 'right'}" *ngFor="let comment of comments">
    <hello [comment]='comment'>
    </hello>
  </div>
</div>

如果你给我一个关于stackblitz的例子，我可以帮助你尝试将
align self:flex end
添加到你的
getStyle（）：Object{if（this.comment.username=='wayne'）{return{left:12+'rem'}；}
提供一个stackblitz，我可以在那里解析css。让我做一个stackblitz。顺便说一句，@disifor，我已经尝试过了，它不起作用。我创建了一个stackblitz:，请帮助，谢谢~谢谢！啊，你刚刚救了我一天！
<div class="toast">
      <div class="toast-header">
        <strong class="mr-auto text-primary">{{ comment.username }}</strong>
      </div>
      <div class="toast-body">
        {{ comment.comment }}
      </div>
    </div>

.toast {
        border: solid;
        min-width: 12vw;
        margin: 0.6rem;
        display: flex;
        flex-direction: column;
        width: max-content;
      }
      :host {
        display: flex;
      }