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>

Answer 2

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

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

如果你还没有看过这个现场演示，我强烈建议你去看看，这是一个非常棒的方法，可以通过实时观察变化来更好地理解 flex-layout 的工作原理。