1

我正在使用 Angular 4 以及官方的 @angular/material-design 和 @angular/flex-layout API 构建一个 SPA。我想显示一些项目的变量列表 ( app-project-list)，我用 Md-Cards ( app-project-card) 表示。在此页面上可以看到我希望它如何成为的一个完美示例：wo3.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>

问题

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

我在这里查看了所有三个类似的问题，但是这些都没有满足要求（请参阅这个 angularJS 问题和这个 angular2 问题）。任何帮助深表感谢！

4

1 回答 1

2

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

<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 正在定义给定断点在一行中应该有多少元素。

同样不使用“中心”将解决行中单例元素的问题，并且自然会从头开始。

通过代码片段，我实现了这个结果： ng4材料卡包装

于 2017-07-28T12:30:47.270 回答