マテリアル化CSSカードの高さと行の最大幅は同じです。

Question

私はマテリアライズCSS付きの角4アプリを持っています。 Webページは、カードを使用し、私はflexboxesを使用して、高さが異なることができますが、カードが同じ長さを持っている場合は、それが3

まで最大化していない、問題はありません： 3枚のカードをお互いの隣に最小化したとき、それは2になり、最終的には1になります。

しかし、カードの高さが同じでないときは、3枚のカードと1枚のカード、さらに3枚のカードの行があります。

どうすればこの問題を解決できますか？

HTML-CODE

<div class="row "> 
    <ng-template ngFor let-flow [ngForOf]="data"> 
    <div *ngIf="flow.id !== currFlow.id" class="col s12 m6 l4"> 
     <div class="card blue-grey darken-1"> 
     <div class="card-content white-text"> 

      <p> 
      <strong><b>{{flow.name}}</b></strong> 
      </p> 

      <form style="overflow: auto; margin-top: 10px;"> 
      <div class="input-field" style="float:left; width: 50%"> 
       <input id="type" type="text" value="{{flow.type}}" readonly> 
       <label class="active" for="type">Type</label> 
      </div> 
      <div class="input-field" style="float: right; width: 50%"> 
       <input id="update" type="text" value="{{flow.updated_at}}" readonly> 
       <label class="active" for="update">Last Update</label> 
      </div> 
      <div class="input-field" style="float:left; width: 50%"> 
       <input id="obs-start" type="text" value="{{flow.observation_start}}" readonly> 
       <label class="active" for="obs-start">Start Observation</label> 
      </div> 
      <div class="input-field" style="float: right; width: 50%"> 
       <input id="obs-end" type="text" value="{{flow.observation_end}}" readonly> 
       <label class="active" for="obs-end">End Observation</label> 
      </div> 
      </form> 
     </div> 
     </div> 
    </div> 
     </ng-template> 
    </div> 

CSS

.input-field label { 
    color: white 
} 
input { 
    border-bottom-color: transparent; 
    font-size: 2rem; 
    margin: 0; 
} 

PICTURE

編集：私は今、これを行う

：

<div class="row d-flex" *ngFor="let item of specialData"> 
    <div *ngFor="let flow of item" class="col s12 m6 l4 d-flex"> 


.d-flex { 
    display: inline-flex; 
} 

3番目の要素ごとに行とインラインフレックスを表示します。 3つの要素がない場合、最後の行には機能しません。

1つの要素/カード - >カードがフローティングになっています：左の代わりに... 2つの要素/カード - > 1つのカードがフローティングされています：もう1つは最初の2枚のカードの中央に配置されますその上に2枚のカードの代わりに2枚のカードを置いておきます

Answer 1

私は問題は、すべてのカード要素を1つの行に入れていることです。 ngForで提供されているインデックスに基づいて、複数の行要素に分割してください。