material-design - 如何在角度 2 的网格中使用 flex 布局和 md-card？

Question

我正在使用“@angular/core”：“2.4.10”和“@angular/material”：“2.0.0-beta.2”。我已经使用 npm 安装了 flex-layout。我想用卡片设计响应式网格。我正在使用 md-grid-list 和 md-card。如何在 md-card 或 md-grid-list 中使用 flex 布局。网格和卡片应根据窗口/屏幕大小做出响应。预期结果：一旦我减小屏幕尺寸，列数应该减少，当屏幕尺寸大时，列数应该增加而不重叠卡片中的内容。

Answer 1

这是可能对Angular 2 材质和 flex-layout 对齐有用的示例代码 此示例代码对我有用。

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
    <md-card [style.background]="'lightBlue'" [style.minHeight]="'100%'" >  
      <md-card-title>Your title here</md-card-title>
      <md-card-content>
        <h2>
            any heading or content here
        </h2>
      </md-card-content>    
    </md-card>
  </md-grid-tile>
</md-grid-list>