我正在尝试使用 Angular Material 6 动态网格列表。与文档相关的示例将网格的内容放在每个图块的中心。见例子here
我希望内容位于每个图块的左上角。
我尝试了以下不起作用的 css。
.mat-grid-tile .mat-figure {
justify-content: flex-start;
align-items: flex-start;
}
【问题讨论】：
标签： css angular angular-material
输入styles.css:
.mat-grid-tile .mat-figure {
justify-content: flex-start !important ;
align-items: flex-start !important;
}
【讨论】：
/deep/ .mat-grid-tile .mat-figure，但这将被弃用，或者您可以在组件装饰器中使用encapsulation: ViewEncapsulation.None。您还可以使用 unset 并将另一个类添加到您的 mat-grid-tile 而不是 !important，以防您想进一步级联。
!important 不是一个好习惯stylelint.io/user-guide/rules/declaration-no-important。你可以将你的项目包装在一个 div 中，并给它一个 100% 的 CSS 宽度
!important。
这可能不适合每个人的需求，但是您的组件可以将内部组件的宽度/高度设置为 100%，而不是为了适应对齐而与功能和 css 属性搏斗。这样一来，Angular 仍然可以正常运行（居中！），并且您可以根据需要调整对齐方式（左、右）。
此处以简单的复选框为例（我的真实场景），但您显然可以根据您的情况对此进行扩展（最复杂的示例是最后一个）。
【讨论】：
虽然这已经晚了，但我遇到了同样的问题。我必须使用 !important 变体来实现所需的功能。然后我找到了我的组件的 CSS 并添加了：
:host >>> .mat-figure{
align-items: start !important;
}
【讨论】：
这行得通。
:ng-deep .mat-grid-tile-content{
justify-content: flex-start !important ;
align-items: flex-start !important;
}
【讨论】：