Question

我尝试创建一个响应列表，其中包含最小宽度，填充所有可用空间（根据浏览器大小排列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

中的诀窍是什么？

然而，我遇到的问题是最后一个元素也被“弯曲”了。在整个宽度看起来很难看，例如连续3张牌，最后一行只有1个元素......

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

我正在使用角度材质的Angular 1.6.1。

Answer 1

要实现此目的，您可以使用Angular Material md-grid-list 和 md-grid-tile （您可以查看文档here和{ {3}}），您可以为每个屏幕尺寸（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

1 个答案: