我有一個使用 Angular 材料的專案，我在其中創建一個包含多個墊卡的組件。我想要做的是根據卡片的寬度使螢屏回應。
現在只有卡片變小了，但標題或內容沒有變小。所有的卡片都出現在一個列中。
這是我的component.html：
<div class="container">
<mat-card *ngFor="let properties of menuComponent.fillerNav" class = "mat-elevation-z4">
<mat-card-header>
<mat-card-title>
{{properties.name}}
<mat-icon class="iconMenu">{{properties.icon}}</mat-icon>
</mat-card-title>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<p>
total
</p>
</mat-card-content>
</mat-card>
</div>
這是我的component.scss：
mat-card {
width: 20%
}
這是使用 F12 的視窗視圖：
uj5u.com熱心網友回復：
要使其在 HTML 上作業，請嘗試這種方式
.flex-me
{ display: inline-flex;
flex-flow: row wrap;
}
mat-card{
width: fit-content;
}
這里還有一個完整的例子，如何使用 Flex Layout 在 Angular 中創建回應式卡片網格
uj5u.com熱心網友回復：
您可以根據視窗的大小使用 fxFlex（和 fxFlex.sm）、fxLayout（和 fxLayout）等屬性對卡片進行回應。
以下是他們構建示例的鏈接：
https://stackblitz.com/edit/card-responsive?file=app/card-overview-example.html https://stackblitz.com/edit/stackoverflow-responsive-grid-flex-layout-and-mat-card -with-img?file=app/card-overview-example.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/493313.html