Css 角度材质6网格列表将项目对齐并将内容对齐到flex start

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

我希望内容放在每个磁贴的左上角

我已经尝试了以下css，但它不起作用

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

---

放入

样式。css

：

---

虽然已经晚了，但我也遇到了同样的问题。我不得不使用这个工具！实现所需功能的重要变体。然后我转到组件的CSS并添加：

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

---

更多信息-

这可能不适合每个人的需要，但是您的组件可以将内部组件的宽度/高度设置为100%，而不是为了适应对齐而努力使用功能和css属性。通过这种方式，Angular仍将按其方式（将其全部居中！），并且您可以根据需要调整对齐方式（左、右）

这里有一个简单的复选框示例（我的真实场景），但无论您的情况如何，您都可以在此基础上进行扩展（最复杂的示例是最后一个）

---

有没有一种方法不必使用.css样式？您可以使用

/deep/.mat grid tile.mat figure

，但这将被弃用，或者您可以在组件装饰器中使用

封装：viewenclosuration.None

。您还可以使用

unset

，将另一个类添加到mat grid磁贴中，而不是

！重要信息

，以防您想要进一步级联。请使用

！重要信息

不是一个好的做法。你可以将你的物品包装在一个div中，并给它一个100%的CSS宽度。我必须同意@MorloMbakop的观点，这不是一个好的做法，而且有真实的生活经验支持为什么在添加时会出现这种情况！对共享组件很重要。但是，如果这个组件很小（并且总是很小）并且是本地的（即，永远不会在任何其他组件中使用），那么这就完成了工作。您肯定应该删除

！重要信息

当您向此组件添加更多内容或决定在其他地方使用它时。感谢您理解我需要为

使用div

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