結合使用 mat-grid 和 flexLayout

Question

state：我使用 angular-flex-layout 構建 forms，但我也需要將 angular-grid 與 flex 一起使用，如何同時使用 flex 和 grid？

  <div fxLayout="row wrap" fxLayoutGap="15px">
    <ng-container *ngFor="let widget of containerList">
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.form.name">
        <div fxFlex="auto">
        <app-form-widget [data]="widget.config"></app-form-widget>
        </div>
      </ng-container>
    </ng-container>

    <ng-container *ngFor="let widget of containerList">
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.tree.name">
        <div fxFlex="auto">
          <app-tree-widget [data]="widget.config"></app-tree-widget>
        </div>
      </ng-container>
    </ng-container>

    <ng-container *ngFor="let widget of containerList">
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.table.name">
        <div fxFlex="auto">
        <app-table-widget [data]="widget.config"></app-table-widget>
        </div>
      </ng-container>
    </ng-container>

    <ng-container *ngFor="let widget of containerList">
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.tab.name">
        <div fxFlex="auto">
        <app-tab-widget [data]="widget.config"></app-tab-widget>
        </div>
      </ng-container>
    </ng-container>
  </div>

Answer 1

您不會在同一元素上同時使用它們。

<div gdColumns="repeat(5, 1fr)">
  <div fxLayout="row" fxLayoutAlign="start center">
    ...
  </div>
</div>