Flex Grid - ala 标题 - md-card

Question

我试图创建一个具有最小宽度的响应式卡片列表，填充所有可用的 space（根据浏览器大小排列 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>

第 2 行 style="min-width: 460px;" 和 flex

中的技巧是什么

但是，我面临的问题是最后一个元素也是 'flexed' 整个宽度，当例如连续 3 张卡片而最后一行只有 1 个元素时，看起来很难看......

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

我正在使用 Angular 1.6.1 和 angular-material。

Answer 1

为此，您可以使用 Angular Material md-grid-list 和 md-grid-tile（您可以查看文档 here and here)，您可以指定每个屏幕尺寸（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>

Here 是一个工作示例。

Flex Grid - ala 标题 - md-card

Flex Grid - ala titles - with md-card

css

flexbox

angularjs

angular-material

md-card