Javascript 如何使用角材质创建卡片网格？

我正在尝试使用ng repeat创建一个每行三张卡的网格。我有一个普通的javascript对象数组附加到作用域。下面的代码将为每张卡创建一个新的行

<div layout="row" ng-repeat='post in posts' layout-fill="" layout-align="">
<md-card>
  <md-card-content>
    <h2 class="md-title">{{post.title}}</h2>
    <p>
      {{post.summary}}
    </p>
  </md-card-content>
  <div class="md-actions" layout="row" layout-align="end center">
    <md-button>View More</md-button>
  </div>
</md-card>
<br>

{{post.title}

{{post.summary}

查看更多

---

我如何迭代我的数组并以三行的形式显示这些卡片？我看了，但看不出它们是如何应用于

的。我创建了一些类似于您可能想要的东西。

md卡

被包装在

div

中，具有

布局包装

。div在读取后动态生成

代码如下：

<div class='md-padding' layout="row" layout-wrap>
    <md-card style="width: 350px;" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
      <md-card-content>
        <h2>{{user}}</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </md-card-content>
      <div class="md-actions" layout="row" layout-align="end center">
        <md-button>Save</md-button>
        <md-button>View</md-button>
      </div>
    </md-card>
  </div>

{{user}}
知识产权是一种权利，是一种权利，是一种权利，是一种权利

拯救
看法

---

卡片宽度可以通过内嵌样式进行调整，希望能有所帮助。

要符合材质/角度，必须使用flex attr To md卡。 Flex attr将为您提供与其父对象成比例的宽度

<div class='md-padding' layout="row" layout-wrap>
    <md-card flex="40" flex-sm="80" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
      <md-card-content>
        <h2>{{user}}</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </md-card-content>
      <div class="md-actions" layout="row" layout-align="end center">
        <md-button>Save</md-button>
        <md-button>View</md-button>
      </div>
    </md-card>
  </div>

{{user}}
知识产权是一种权利，是一种权利，是一种权利，是一种权利

拯救
看法

---

在本例中，您将有两张卡（每张卡40%），当屏幕调整为-sm时，卡的比例将为80%。

我只需要这个；以下是一个更全面的解决方案，仅使用布局功能，用于3列：

<md-content class="md-padding" layout="row" layout-wrap>
    <div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]">
        <md-card>
            // ...
        </md-card>
    </div>
</md-content>

// ...

将卡放入大小正确的div中，以控制边距并避免溢出。

您可以使用

class=“grid container”

。 作为一个示例，类似这样的代码片段

<div class="grid-container">
    <mat-grid-list cols="2" rowHeight="350px">
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 1
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="2">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 2
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 3
            </mat-card>  
        </mat-grid-tile>
    </mat-grid-list>
</div>

卡1
卡2
卡片3

将产生与此类似的输出

---

你能为上面提供一个codepen或fiddle吗？这没关系，但我认为如果包装器div是用

flex

定义的，这样每个

md卡

都可以继承并定义一个响应值

flex=“33”

，而不是在card@gru你能举个例子吗？这听起来不错，但我无法在实践中创建您的解决方案。嘿@gru谢谢您的示例，但它没有响应-在很小的范围内，DTH被破坏了。是否可以声明一些属性，其中我为不同宽度的视图设置了卡片计数的定义？@Jenan在这种情况下，您应该使用中所述的正常断点符号，例如，您可以使用flex sm、flex md等。

layout wrap

解决了我的问题，flex工作不正常。我还是不明白为什么需要它，我会读更多关于它是如何工作的。谢谢