角度材料 6 网格列出对齐项目和对齐内容以灵活启动

Question

我正在尝试使用Angular Material 6动态网格列表。与文档相关的示例将网格的内容放在每个磁贴的中心。在此处查看示例

我希望内容位于每个磁贴的左上角。

我已经尝试了以下不起作用的css。

.mat-grid-tile .mat-figure {
justify-content: flex-start;
align-items: flex-start;
}

Answer 1

放入styles.css：

演示

.mat-grid-tile .mat-figure {
justify-content: flex-start !important ;
align-items: flex-start !important;
}

Answer 2

这可能不符合每个人的需求，但与其为了适应对齐而与功能和 css 属性搏斗，您的组件可以将内部组件的宽度/高度设置为 100%。这样，Angular 仍然可以按照自己的方式进行(居中！(，您可以根据需要调整对齐方式(左、右(。

这里有一个简单的复选框的例子(我的真实场景(，但你显然可以用你的情况来扩展它(最复杂的例子是最后一个(。

https://stackblitz.com/edit/angular-74i5kw

Answer 3

虽然这已经很晚了，但我遇到了同样的问题。我不得不使用！important变体来实现所需的目标。然后我到了我的组件的CSS并添加了：

:host >>> .mat-figure{
align-items: start !important;
}

更多信息 - https://angular.io/guide/component-styles

Answer 4

这有效。

:ng-deep .mat-grid-tile-content{
justify-content: flex-start !important ;
align-items: flex-start !important;
}

Answer 5

将以下样式添加到网格磁贴的内容中"align-self: start"：