fxLayoutAlign =“space-between center” - 重叠对齐中的最后一行

Question

我想在中心显示带有两列/三列和多行的卡片。卡片是动态显示的。我想在每排牌之间有相同的空间。我在我的代码中设置了这个属性fxLayoutAlign =“space-between center”。通过引用此链接https://tburleson-layouts-demos.firebaseapp.com/#/docs。它无法正确显示。行之间没有空格，最后一行未与列正确对齐。只有最后一行未与列垂直对齐。当我更改浏览器窗口大小时，对齐也会混乱。这些是我正在使用的版本

Angular version - 2.4.10
"@angular/material": "2.0.0-beta.2",
"@angular/flex-layout@2.0.0-beta.5"

<div fxLayout="row" fxLayoutWrap fxLayoutGap="6rem" fxLayoutAlign="space-between center">
  <md-card  fxFlex.gt-md="40" fxFlex.md="50"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let data of myData" [style.background]="'lightBlue'">
    <md-card-header>
      <md-card-title>element</md-card-title>
    </md-card-header>

    <md-card-content>
            <h1>Main Content Data</h1>
      <p>
        Lorem Ipsum
      </p>
    </md-card-content>
  </md-card>
</div>

Answer 1

此示例代码对我有用。添加了合理内容和保证金。

 <div fxLayout="row" fxLayoutWrap  style="padding-bottom: 25px; 
padding-top: 25px;  margin: auto;justify-content: center" >
  <md-card  fxFlex.gt-md="40" fxFlex.md="50"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let data of myData" [style.background]="'lightBlue'" style="margin:5px;">
    <md-card-header>
      <md-card-title>element</md-card-title>
    </md-card-header>

    <md-card-content>
            <h1>Main Content Data</h1>
      <p>
        Lorem Ipsum
      </p>
    </md-card-content>
  </md-card>
</div>