twitter-bootstrap - Angular 2 Material: 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>

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

どうすれば同じ高さにできますか？(フレックスボックス..しかし、どのように?)

プランカー

注: Material2 にはまだレイアウト システムがないため、レスポンシブ グリッドに Bootstrap を使用しています。どんな堅固なグリッドシステムでも機能します。

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

プランカー

より良い回答が投稿された場​​合は、喜んで受け入れます。

Answer 2

各カードにクラス.row-eq-heightを追加できます。これは flexbox CSS3 プロパティを使用するため、そのクラスを追加したくない場合は、次のようにするのと同じです:

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