角度显示垫卡在同一行

Question

在我的代码中，如果[style.width]的总和小于100％，我想使垫层卡片显示在同一行中。例如，如果第一张Mat卡的宽度为25％，第二张Mat卡的宽度为75％，则两张卡应显示在同一行中。我本来是想开始使用fxflex的，但是自从ngFor以来，它是行不通的。

我想知道是否有任何方法可以实现它？

    <ul *ngFor="let item of columnsData | keyvalue: valueAsOrder ; let i of index">
    <!--Only need display columns-->
    <div *ngIf="item.value['type'] == 'column'">

        <mat-card *ngIf="item.value['width'] == 1" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'8.333333%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 2" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'16.666667%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 3" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'25%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 4" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'33.333333%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 5" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'41.666667%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 6" [style.backgroundColor]="'white'" [style.border]="black"
          [style.width]="'50%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 7" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'58.333333%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 8" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'66.666667%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 9" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'75%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 10" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'83.333333%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 11" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'91.666667%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
        <mat-card *ngIf="item.value['width'] == 12" [style.backgroundColor]="'white'" [style.border]="black"
            [style.width]="'100%'" class="example-card">
            {{item.value["label"]}}
            <div *ngIf="i['value']['components'] != null">
                <app-column [insideIndex]="i"></app-column>
            </div>
        </mat-card>
    </div>

</ul>