使用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/

Answer 2

最近我刚开始使用@angular/flex-layout时，我碰巧遇到了同样的问题。导致此问题的是fxLayoutWrap。由于这篇文章已经有一段时间了，所以我不确定您是否找到了答案。由于已将其删除，因此您需要将其指定为fxLayout="row wrap"而不是fxLayoutWrap。