Angular Material 6 grid list align-items and justify-content to flex-start

问题

I'm trying to use Angular Material 6 Dynamic grid-list. The example relating to the documentation puts contents of the grid in the centre of each tile. See example here

I want the content to go in the top left hand corner of each tile.

I have tried the following css which does not work.

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

回答1:

Put in styles.css:

DEMO

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

回答2:

Although this is late, I was having the same issue. I had to use the !important variant to achieve what was needed. Then I got to my component's CSS and added:

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

More information - https://angular.io/guide/component-styles

来源：https://stackoverflow.com/questions/51920250/angular-material-6-grid-list-align-items-and-justify-content-to-flex-start