如何动态放置卡片并填充空白区域？

Question

我的目标是做这样的事情（例如“卡片动作按钮”）https://material.angularjs.org/latest/demo/card但是动态。

<div class="md-padding" layout="row" layout-xs="column" layout-wrap>
<div flex-gt-xs="50" flex-sm="100" class="blue" ng-repeat="match in matches.matchesList">

    <md-card md-whiteframe="8">
        <md-card-header>
            <md-card-avatar>
                <md-icon class="md-avatar-icon" ></md-icon>
            </md-card-avatar>
            <md-card-header-text>
                <span class="md-title">Title</span>
                <span class="md-subhead">subhead</span>
            </md-card-header-text>
        </md-card-header>

        <md-card-content>
            <!-- Directive to show the score board -->

            <p>
            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
            </p>

        </md-card-content>
    </md-card>

</div>
</div>

当卡片有不同的高度时，

以下是代码但我不知道如果有人知道如何投入工作请告诉我http://codepen.io/TiagoSousa/pen/aNjWqd

codepen的代码是不同的，并且构建为适用于每个人，因为我在堆栈上插入的代码有指令和其他你不能做的东西

Answer 1

我认为由于CSS flexbox（即flex-direction: row），每行上的卡片起始处于同一高度，但不确定。一种解决方案是将要显示的项目拆分为左列和右列。看看http://codepen.io/z00bs/pen/XdBgJK（我清理了你的笔......）。