Angular 7 材質：水平對齊卡片

Question

如果我有更多（材料）卡片，它們就會垂直對齊。 怎么可能，從左到右水平對齊卡片？

Answer 1

您可以使用屬性fxLayout="row"

<div fxLayout="row"  fxLayoutGap="12px"  [style.margin-top]="'12px'">

STACKBLITZ 演示

Answer 2

我正在嘗試為“商店”制作一張水平卡片清單，並像這樣創建我的卡片。 盡管如此，我的卡還是垂直對齊的。

 <h1>Catalog</h1> <div fxLayout="row" fxLayoutGap="12px" [style.margin-top]="'12px'"> <mat-card> <mat-card-header> <mat-card-title>Balls</mat-card-title> </mat-card-header> <mat-card-content> <div> <div class="card" *ngFor="let product of products"> <img class="catalogImage" src="assets/img/basketball.png" /> <p class="catalogTitle"> {{product.name}} </p> <p class="catalogPrice"> ${{product.price}} </p> <p class="catalogDescription"> {{product.description}} </p> <p><button class="catalogCartBtn">Add to Cart</button></p> </div> </div> </mat-card-content> <mat-card-actions> </mat-card-actions> </mat-card> </div>