使用 Angular 4 的材料卡的响应列表答案

【问题标题】：Responsive list of Material Cards With Angular 4使用 Angular 4 的材料卡的响应列表
【发布时间】：2017-11-25 12:59:53
【问题描述】：

我正在使用 Angular 4 以及官方的 @angular/material-design 和 @angular/flex-layout API 构建一个 SPA。我想显示一些项目的变量列表 (app-project-list)，我用 Md-Cards (app-project-card) 表示。在此页面上可以看到我想要的一个完美示例：weo3.com/work 我们的目标是拥有一个响应式卡片列表：

在桌面上它们应该被放置在环绕的行中
它们之间应该有一些边距
如果列表中的最后一张卡片是该行中唯一的一张，则它应该左对齐
在较小的屏幕上，列数应该减少
在移动设备上（断点为xs）列表应显示在列中

这是我到目前为止的代码，但它有问题：

//project-list-component
<div fxLayout="row wrap" fxLayoutGap="1em" fxLayoutAlign="center center" fxLayout.lt-sm="column">
  <app-project-card *ngFor="let p of projects | async" [project]="p">
  </app-project-card>
</div>

//project-list-component.css
app-project-card {
  margin-top: 1em;
}
//project-card-component starts with md-card as root element, nothing special here
  <md-card>
  ...
</md-card>

问题

在桌面上和一行中的所有项目看起来都很好
调整大小后，最后一项会被包裹在新行中并居中对齐，但我需要在行首对齐Example
包装一个或多个项目时，它们不会在第一行下方对齐，而是向右偏移 1em（参见第一张图片）
当屏幕变小时，卡片并没有填满所有可用空间，左右有大量空白

我在这里查看了所有三个类似的问题，但没有一个满足要求（请参阅this angularJS question 和 this angular2 question）。非常感谢任何帮助！

【问题讨论】：

标签： angular angular-material angular-flex-layout

【解决方案1】：

我一直在解决包装多张卡片的类似问题。我找到了类似问题的解决方案：

<div fxLayout="row" fxLayoutWrap>
    <md-card *ngFor="let post of posts" fxFlex.lg="33" fxFlex.lt-lg="50" fxFlex.xs="100">
           ...
    </md-card>
</div>

注意fxLayoutWrap 指令，它允许在新行上正确包装元素。并且各个 fxFlex-es 正在定义给定断点在一行中应该有多少元素。

同样不使用'center'也可以解决单例元素的问题，自然会从头开始。

使用代码 sn-p 我得到了这个结果：

【讨论】：