1

"@ angular/core": "2.4.10"と "@ angular/material": "2.0.0-beta.2"を使用しています。 npmを使ってフレックスレイアウトをインストールしました。私はカードで応答性のあるグリッドを設計したい。私はmd-grid-listとmd-cardを使用しています。 md-cardまたはmd-grid-listでフレックスレイアウトを使用するにはどうすればいいですか?グリッドとカードは、ウィンドウ/画面サイズに応じて応答する必要があります。期待される結果:画面サイズを小さくするとすぐに列数を減らし、画面サイズが大きくなると、カードの内容が重ならないように列数が増えます。角度2のグリッドでmdカードと一緒にフレックスレイアウトを使用するにはどうすればよいですか?

答えて

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> 
関連する問題