angular - 如何以响应方式使用 Angular flex 布局扭曲和居中多个 div

Question

如何使用 angular/flex-layout 在图片中创建效果.我一直在试验 fxLayoutWrap 但它不会生成以下布局

Answer 1

这里是 Angular 6 和 flex-layout 6.0.0-beta.16 的版本，因为 fxLayoutWrap 已被弃用版本

<div fxLayout="column" fxLayoutAlign=" none">
  <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="space-around stretch" fxLayout.xs="column">
    <div *ngFor="let item of items | async" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex.xl="33">
     {{item}}
    </div>
  </div>
</div>