我无法以角度对齐材料设计卡

Question

i have used ng-flex so they are responsive. but I want to align them so that they are all the same height. how you can see they aren't alinged .

 .content { padding: 16px; } .content > mat-card { width: 200px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="content"> <div fxLayout="row wrap" fxLayoutGap="16px grid"> <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let manga of mangaList"> <mat-card class="mat-elevation-z4" > <mat-card-header> <mat-card-title>{{ manga.title }}</mat-card-title> </mat-card-header> <img mat-card-image src="{{ manga.preview }}"> <mat-card-actions> <button mat-button>Leggi</button> <button mat-button (click)="updateBookmark(manga)"> <i *ngIf="manga.bookmarked == 'false'; else ifBookmarked" class="fa fa-bookmark-o fa-lg"></i> <ng-template #ifBookmarked> <i class="fa fa-bookmark fa-lg"></i> </ng-template> </button> </mat-card-actions> </mat-card> </div> </div> </div>

Answer 1

Give the card class itself a limit with maxheight + height . So all cards same height. If you want the contents of the card to have all same height you have to hardcode the height for mat-card-header, the image and mat-card-actions. To regulate the image height container make a div arround it. Something like that:

 <div fxLayout="row grid"> <mat-card *ngFor="let manga of mangaList"> <mat-card-header> -- Content -- </mat-card-header> <div> <img> </div> <mat-card-actions> -- Content -- </mat-card-actions> </mat-card> </div>

 Card { height: 200px; max-height 200px; mat-card-header { height 20px; max-height 20px; } image-div { height 60px; max-height 60px; } mat-card-actions { height 20px; max-height 20px; } }

Also i see on the 3rd one is the Title to long. If you wanna keep the Title length you gotta adjust height