角2材質：MdCardsの高さは同じです

Question

私はAngular2、Material2、Bootstrapを使用しています。 レイアウトは基本的に

<div class="row"> 
    <div class="col-md-4"> 
    <md-card></md-card> 
    </div> 
    <div class="col-md-4"> 
    <md-card></md-card> 
    </div> 
    <div class="col-md-4"> 
    <md-card></md-card> 
    </div> 
</div> 

すべてのカードの内容が異なるため、高さが異なります。

どうすれば同じ高さにすることができますか？ （flexboxes ..しかし、どうやって？）

Plunker

NB：Material2はまだそのレイアウトシステムを持っていないので、私は、応答グリッドのためのブートストラップを使用しています。どんなしっかりしたグリッドシステムも私のために働くでしょう。

Answer 1

オールライトを、このCSSは私のために働いているようだ：

.row { 
    display: flex; 
    flex-wrap: wrap; 
} 

.row md-card, 
.row md-card .md-card { 
    height: 100%; 
} 

.row md-card .md-card { 
    display: flex; 
    flex-direction: column; 
} 

.row md-card .md-card md-card-content { 
    flex-grow: 1; 
} 

Plunker

もっと良い回答が掲載されていれば、私はそれを受け入れることができます。

Answer 2

各カードに.row-eq-heightクラスを追加できます。あなたはそのクラスを追加することが好きではありませんので、もしそれが、フレキシボックスのCSS3プロパティを使用して、それをやってと同じです：

.col-md-4 { 
    display: flex; 
}