Question

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

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

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

1 个答案: