带有Angular 4的材料卡响应列表

时间:2017-06-22 10:00:21

标签: angular angular-material angular-flex-layout

我正在使用Angular 4和官方的@ angular / material-design和@ angular / flex-layout API构建SPA。 我想显示一些项目的变量列表(This is the message you received: ?{ EJFDEBFEEBFACACACACACACACACACAAA ),我用Md-Cards(app-project-list)表示。 在此页面上可以看到我想要的完美示例:weo3.com/work 我们的目标是拥有响应的卡片列表:

  • 在桌面上,它们应该放在环绕的行中
  • 他们应该在
  • 之间和之下有一些余地
  • 如果列表中的唯一一张卡
  • ,则列表中的最后一张卡应该左对齐
  • 在较小的屏幕上,列数应减少
  • 和移动设备(断点为app-project-card)列表应显示在列

这是我到目前为止的代码,它有问题:

xs

问题

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

我在这里查看了所有三个类似的问题,但这些问题都没有满足要求(参见this angularJS questionthis angular2 question)。非常感谢任何帮助!

1 个答案:

答案 0 :(得分: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'将解决行中单例元素的问题,并且自然会从头开始。

使用代码片段我实现了这个结果: ng4 material cards wrapping