Угловой 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: Я использую Bootstrap для гибкой сетки, так как Материал2 до сих пор не имеет своей системы макета. Любая сплошная сетка будет работать для меня.

Answer 1

AllRight, это 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. Это использует свойство Flexbox CSS3, так что если вам не нравится, добавив, что класс, это так же, как делают:

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