Angular Material 6 网格列表对齐项目并将内容对齐到 flex-start

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

这可能无法满足每个人的需求，但您的组件可以将内部组件的宽度/高度设置为 100%，而不是为了适应对齐而与功能和 css 属性进行斗争。这样，Angular 仍然会按照自己的方式行事（将其全部居中！），并且您可以根据需要调整对齐方式（左、右）。

这里的示例带有简单的复选框（我的现实世界场景），但是无论您的情况如何，您显然都可以对此进行扩展（最复杂的示例是最后一个）。

Answer 3

虽然已经晚了，但我也遇到了同样的问题。我必须使用 !important 变体来实现所需的功能。然后我进入组件的 CSS 并添加：

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

Answer 4

这有效。

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

Answer 5

将以下样式添加到网格图块的内容中：

"align-self: start"

Answer 6

尝试：

::ng-deep .mat-grid-tile-content{
    display: block !important;
}