html - 使用 fxLayout 调整 div 大小以适应内容并在父级中居中对齐

Question

如何使用 Angular 中的 fxLayout 实现上图所示的布局？

这是我的代码示例和结果图像。我的红色 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/