如何在角度2的网格中使用Flex布局和md卡? [英] 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结合使用.网格和卡应根据窗口/屏幕尺寸做出响应.预期结果:减小屏幕尺寸后，应减少列数，当屏幕尺寸较大时，应增加列数，而不会重叠卡中的内容.

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.

推荐答案

以下是示例代码，可能会有所帮助

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>

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