将弹性列项在一个父级内左右对齐 Div

Question

在 Angular 应用程序中，我试图以自定义的垂直方式堆叠 Bootstrap toast 元素，即将某些 toast 放置到页面左侧（ align-items-start 样式），某些 toast 到页面右侧（align-items-end 样式），但不幸的是它们都在一个父项下 Div.

代码在这里：

父组件模板

 <div class="toast-container d-flex flex-column align-items-start">

     <app-share-comment [comment]='comment' *ngFor="let comment of comments" >
   </app-share-comment>

 </div>

子 app-share-comment 模板和 css 和 typeScript

  <div class="toast" [ngStyle]="style" data-autohide="false">
    <div class="toast-header">
      <strong class="mr-auto text-primary">{{comment.username}}</strong>
      <time class="timeago" [dateTime]="commentTime"></time>    
    </div>
    <div class="toast-body">
      {{comment.comment}}
    </div>
  </div>

.toast{
    min-width: 12vw;
    width: fit-content;
    margin: 0.6rem;
    position: relative
}

  ngOnInit(): void {
    (<any>$('.toast')).toast('show');

    this.style = this.getStyle()
  }

  getStyle(): Object {
    if (this.comment.username == 'wayne'){
      return {
        left : 12 +'rem'
      };
    }

使用当前代码，我得到以下效果：

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

是否可以Css方式实现？我尝试了很多 flex 属性但没有成功，有人可以帮忙吗？

我还创建了一个 stackblitz：https://stackblitz.com/edit/angular-ivy-jbp7ua

Answer 1

使用这个

getStyle(): Object {
    if (this.comment.username == "right") {
      return {
        margin: '10px 0 0px auto'
      };
    }
  }

Answer 2

在您提供的 stackblitz 中，我进行了以下更改：-

工作 Stackblitz :- https://stackblitz.com/edit/angular-ivy-tkgnym?file=src%2Fapp%2Fapp.component.css

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>

hello.component.ts(模板)

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

hello.component.ts（风格）

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

将弹性列项在一个父级内左右对齐 Div

Align flex-column items to left and right within one parent Div

css

toast

flexbox

bootstrap-4

angular