Question

我正在尝试使用Angular Material 6动态网格列表。与文档有关的示例将网格的内容放在每个图块的中心。参见示例here

我希望内容显示在每个图块的左上角。

我尝试了以下不起作用的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;
}