Угловой дисплей мат-карт в одном ряду

Question

В моем коде я хочу, чтобы мат-карты отображались в одной строке, если сумма [style.width] меньше 100%. Например, если первая матовая карта имеет ширину 25%, а вторая 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>