如何在 angular 2 的网格中使用 flex 布局和 md-card? [英] How to use flex layout along with md-card in the grid in angular 2?

问题描述

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

I am using "@angular/core": "2.4.10" and "@angular/material": "2.0.0-beta.2". I have installed flex-layout using npm. I want to design responsive grid with cards. I am using md-grid-list and md-card. How do I use flex layout with md-card or md-grid-list. The grid and the card should be responsive according to the window/screen size. Expected result: As soon as I decrease the screen size, the number of columns should be reduced and when the screen size is big the number of columns should increase without overlapping the contents in the card.

推荐答案

以下是可能有用的示例代码 Angular 2 材质和 flex-layout-alignement此示例代码对我有用.

Here is the sample code which might be helpful Angular 2 material and flex-layout alignement This sample code worked for me.

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

这篇关于如何在 angular 2 的网格中使用 flex 布局和 md-card?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！