Измените размер div, чтобы он соответствовал содержанию и выравниванию по центру в родительском элементе, используя fxLayout

Question

Как мне добиться макета в соответствии с изображением выше, используя fxLayout в Angular?

вот пример моего кода и изображениярезультата.Мой красный div по умолчанию равен ширине синего div, и элементы выравниваются по левому краю, оставляя отступ справа, что приводит к смещению результата от центра.

<div fxLayout="row" fxLayoutAlign="center center">
    <div class="blue" fxFlex="80%" fxLayout="row">
        <div class="red" fxLayout="row" fxLayoutWrap fxLayoutAlign="start center">
            <app-item *ngFor="let item of items.all" [item]="item"></app-item>
    </div>
</div>

Answer 1

Я изучаю другой вариант для всех, кто заинтересован.https://brianflove.com/2017/05/03/responsive-angular/