FlexLayout Angular 并在开始和结束时在一行中对齐项目

Question

我在 angular 7/8 中使用了 Angular flexlayout 库。我希望左侧有 4 个按钮（flex-start），并且希望右侧（flex-end）的两个复选框处于同一级别。如果可能的话，我想在 flexlayout Angular 库中进行。

我已经尝试了我在下面向您展示的代码。我还尝试制作 2 个 mat-card-action 组件，但它们彼此低于，而不是在一条线上。

<mat-card-actions fxLayoutGap="1em">

  <button mat-raised-button color="accent" (click)="newRows()">Add</button>
  <button [disabled]="selectedRow != undefined && selectedRow.isBevoorschotting" mat-raised-button color="accent"
    (click)="updateRows()">Update</button>
  <button mat-raised-button color="warn" (click)="deleteRows()" [disabled]='!isAdmin'>Delete</button>
  <button mat-raised-button color="accent" (click)="refresh(0)">Refresh</button>

  <mat-checkbox (change)="onclickMutatieVelden()" [(ngModel)]="toonMutatievelden">
    <p>Mutatie velden aan...</p>
  </mat-checkbox>
  <mat-checkbox (change)="onclickMaakInactief()" *ngIf="selectedRow" [(ngModel)]="!selectedRow.isActief">
    <p>Maak Inactief...</p>
  </mat-checkbox>
</mat-card-actions>

Anybody can help me out ?

Answer 1

可以这样吗？

<mat-card fxLayout="row">
  <div fxLayout="row" fxLayoutAlign="start center" fxFlex="50"     fxLayoutGap="5px">
      <button mat-raised-button color="accent" (click)="newRows()">Add</button>
      <button [disabled]="selectedRow != undefined && selectedRow.isBevoorschotting" mat-raised-button color="accent"
        (click)="updateRows()">Update</button>
      <button mat-raised-button color="warn" (click)="deleteRows()" [disabled]='!isAdmin'>Delete</button>
      <button mat-raised-button color="accent" (click)="refresh(0)">Refresh</button>
  </div>
  <div fxLayout="row"  fxFlex fxLayoutAlign="end center">
      <mat-checkbox (change)="onclickMutatieVelden()" [(ngModel)]="toonMutatievelden">
        <p>Mutatie velden aan...</p>
      </mat-checkbox>
      <mat-checkbox (change)="onclickMaakInactief()" *ngIf="selectedRow" [(ngModel)]="!selectedRow.isActief">
        <p>Maak Inactief...</p>
      </mat-checkbox>
  </div>
</mat-card>

https://stackblitz.com/edit/flex-layout-angular-material-gxew4y?embed=1&file=app/app.component.html