html - FlexLayout Angular 并在开始和结束时在一行中对齐元素

Question

我在 Angular 7/8 内使用 Angular flexlayout 库。我想在左侧(flex-start)有 4 个按钮，并且我想在右侧(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