どのようにカードを動的に配置し、空のスペースを埋める？

-1

私の目的は、このようなこと（例： "カードアクションボタン"）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のコードを教えてください場合は仕事に配置する方法を知りません私はスタック上に挿入したコードには指示やその他のものはありませんので、皆さんのために作業しています。

出典

2016-04-22 Tiago Sousa

私はここで同様の質問に答えました：http://stackoverflow.com/questions/36587784/angular-material-md-card-dynamic-height/36613500#36613500 –

@ AnttiVyyrynen私はすでにそれを見ましたが、あなたが持っているものは私が見つけた唯一の解決策でしたが、私は列でやりたいとは思っていませんでした。データを変更せずに他の方法があるかどうかを知りたかったのです。 –

問題は、行コンテナ内に2つの異なる高さの子を持つことができないことです。このコンテナは常に、背の高い子供の高さに応じて成長し、最終的にすべてを2行目に下に押し出します。これはあなたの写真で起こることです。 –

CSのために各行のカードが同じ高さから始まると思いますSフレックスボックス（すなわちflex-direction: row）、確かに。 1つの解決策は、表示したい項目を左と右の列に分割することです。 http://codepen.io/z00bs/pen/XdBgJKを見てください（私はあなたのペンをきれいにしました...）。

出典

2016-04-22 11:05:49 z00bs

しかし、私はあなたの列と、その順で入れている見た何のためにある： [1 4] [2〜5] [3 6] と私はしたい： [1 2] [3 4] [5 6]しかし、視覚的なレイアウトはそれです。 –

@TiagoSousaこれは、2つの配列にマッチを分割する方法の問題です。ペンをチェックして、私はそれを更新しました。 – z00bs

しかし、私はそれが[1 3 5 2 6]を理解しようとするXSにウィンドウのサイズを変更するとき？これを見るには、codepenをXSにリサイズし、テキストの前に数字を入れてより良く見てください。しかし、本当に助けていただきありがとうございますが、これを修正するためのアイデアがあれば、本当に助けになります。 –

どのようにカードを動的に配置し、空のスペースを埋める？

答えて

関連する問題