0

我想在中心显示两/三列和多行的卡片。卡片是动态显示的。我希望每行卡片之间有相等的空间。我在我的代码中设置了这个属性 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>

在此处输入图像描述

4

1 回答 1

0

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

 <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>
于 2017-05-17T12:12:42.787 回答