Angular Material 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;
}

使用 `!important` 不是一个好的做法 https://stylelint.io/user-guide/rules/declaration-no-important。你可以将你的项目包裹在一个 div 中，并给它一个 100% 的 CSS 宽度 (4认同)
有没有办法不必在style.css中？ (2认同)

Answer 2

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

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