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

Question

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

Answer 1

最好的方法是将fxLayoutWrap与元素的响应式fxFlex大小相结合。设置fxLayoutGap =“＃”还将确保行项之间存在间隙。为内部div的顶部/底部设置边距也可以处理行之间的间隙（Angular - Material项目需要很多次）

<div fxLayout="row" fxLayoutGap="5" fxLayoutWrap fxLayoutAlign="space-around stretch">
  <div fxFlex.lt-md="30" fxFlex.gt-sm="20" fxLayout="column" fxLayoutAlign="center stretch">
    <h1>Header</h1>
    <p>content</p>
  </div>
  <div fxFlex.lt-md="30" fxFlex.gt-sm="20" fxLayout="column" fxLayoutAlign="center stretch">
    <h1>Header</h1>
    <p>content</p>
  </div>
  .
  .
  .
</div>

如果您还没有看到this live demo我强烈建议您查看它，通过观察实时发生的变化，可以更好地了解flex-layout的工作原理。

Answer 2

这是 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>