Css 柔性网格-ala标题-带md卡

我试图创建一个响应性强的卡片列表，该列表的宽度最小，填满所有可用空间（根据浏览器大小排列1、2、3张卡片）

到目前为止，我有代码，这是什么：

<div class='md-padding' layout="row" layout-wrap>
  <md-card style="min-width: 460px;" ng-repeat="teacher in tc.teachers" flex>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline" style="padding-bottom: 10px;">{{ teacher.name }}</span>
        ... other elements ....
      </md-card-title-text>
      <md-card-title-media>
        <div class="md-media-lg card-media" style="height: 228px;">
          <img ng-if="teacher.image" ng-src="{{ tc.getImage( teacher ) }}" class="md-card-image" >
        </div>
      </md-card-title-media>
    </md-card-title>
  </md-card>
</div>

{{teacher.name}
... 其他要素。。。。

技巧是在第2行

style=“min width:460px；”

和

flex

然而，我面临的问题是，最后一个元素也“弯曲”到整个宽度，例如，当一行中有3张卡，而最后一行只有1个元素时，看起来很难看

在这种情况下，我如何将最后一个元素调整为1/3，并对进一步的尺寸变化作出响应？

---

我将Angular 1.6.1与Angular material一起使用。

要实现这一点，您可以使用Angular materialmd grid list和md grid tile（您可以检查文档，并指定每个屏幕大小（xs、sm、md、lg等）需要多少列、列的高度和其他一些内容

举例来说，如果最后一行只有一个元素，那么这个元素不会比其他元素大

您可以这样使用它：

<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="3" md-cols-lg="4" md-row-height="100px">
    <md-grid-tile ng-repeat="teacher in tc.teachers">
        <!-- width : 100% -> to make the cards gets the full width -->
        <md-card style="width:100%;">
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">{{ teacher.name }}</span>
                    ... other elements ....
                </md-card-title-text>
            </md-card-title>
        </md-card>
    </md-grid-tile>
</md-grid-list>

{{teacher.name}
... 其他要素。。。。

---

是一个工作示例。

要实现这一点，您可以使用Angular Materialmd grid list和md grid tile（您可以检查文档，并指定每个屏幕大小（xs、sm、md、lg等）需要多少列、列的高度和其他一些内容

举例来说，如果最后一行只有一个元素，那么这个元素不会比其他元素大

您可以这样使用它：

<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="3" md-cols-lg="4" md-row-height="100px">
    <md-grid-tile ng-repeat="teacher in tc.teachers">
        <!-- width : 100% -> to make the cards gets the full width -->
        <md-card style="width:100%;">
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">{{ teacher.name }}</span>
                    ... other elements ....
                </md-card-title-text>
            </md-card-title>
        </md-card>
    </md-grid-tile>
</md-grid-list>

{{teacher.name}
... 其他要素。。。。

---

是一个有效的例子。

什么是css的

[flex]

？请提供代码snipet或jsfiddle？使卡片容器显示：flex；&然后给卡片（卡片flex容器的子级）这个属性flex grow:1。希望这对你提供的有限信息有所帮助。我不确定我是否理解这个问题。正如@bhv所提到的，您应该尝试创建一个演示来向我们展示。根据我的理解，我认为您不应该真正使用

原始css

来管理元素的宽度。以下是一些可能对您有所帮助的内容的开始：（您可以使用responsive flex-…和layout-…：）什么是css的

[flex]

？请提供代码snipet或jsfiddle？使卡片容器显示：flex；&然后给卡片（卡片flex容器的子级）这个属性flex grow:1。希望这对你提供的有限信息有所帮助。我不确定我是否理解这个问题。正如@bhv所提到的，您应该尝试创建一个演示来向我们展示。根据我的理解，我认为您不应该真正使用

原始css

来管理元素的宽度。以下是一些可能对您有所帮助的内容的开始：（您可以使用响应性flex-…和布局-…：）