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

问题描述：

我的目标是做这样的事情（例如“卡片动作按钮”）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的代码是不同的，并建立在每个人的工作，因为我在堆栈上插入的代码有指令和其他东西你不能做

我在这里回答了类似的问题：http://stackoverflow.com/questions/36587784/angular-material-md-card-dynamic-height/36613500#36613500 –

@AnttiVäyrynen我已经看到，但你有什么是这一列是我找到的唯一解决方案，但我不想在列中做，我想知道是否有其他方式不改变数据，因为对我而言，它们出现的顺序非常重要。 –

问题是你在行容器中不能有两个不同高度的孩子。该容器总是根据最高的儿童的身高生长，最终将第二排的所有东西向下推。这是你的照片中发生的事情。 –

答

我认为每行上的卡由于CS开始在相同的高度S flexbox（即flex-direction: row），但不知道。一种解决方案是将要显示的项目分成左右两列。看看http://codepen.io/z00bs/pen/XdBgJK（我清理了你的笔......）。

但我所看到的你被列上放置和该命令是： [1〜4] [2〜5] [3 6] ，我想： [1〜2] [3 4] [5 6]但视觉布局就是这样。 –

@TiagoSousa这只是你如何将匹配分解到两个数组的问题。检查笔，我已经更新了它。 – z00bs

但是，当我调整窗口大小到XS时，它会理解[1 3 5 2 6]？要看到这一点，将codepen的大小调整为XS，并将数字放在文本之前以便更好地查看。但是，感谢真的帮助，但如果你有一个理想的解决这个问题真的会有所帮助。 –

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

相关推荐