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

Posted 2023-02-22

【中文标题】如何在角度 2 的网格中使用 flex 布局和 md-card？

【英文标题】：How to use flex layout along with md-card in the grid in angular 2?

【发布时间】：2017-10-10 12:46:28

【问题描述】：

我正在使用“@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 布局。网格和卡片应根据窗口/屏幕大小做出响应。预期结果：一旦我减小屏幕尺寸，列数应该减少，当屏幕尺寸大时，列数应该增加而不与卡片中的内容重叠。

【参考方案1】：

这里是可能有用的示例代码Angular 2 material and flex-layout alignement 此示例代码对我有用。

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