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

这个示例代码对我有用。添加了 justify-content 和边距。

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