有人能幫助我嗎？
我正在用 Angular 寫作，我想在每行顯示例如 5 張卡片。現在我有水平滾動，它看起來像這樣：
代碼：
<div class="content">
<div fxLayout="row wrap" fxLayout.xs="column" style="width: 35%; ">
<!-- Single "Responsive" Card-->
<div fxFlex [style.margin]="'20px'" style="display: flex;">
<mat-card *ngFor="let release of releases" [style.min-width]="'200px'">
<mat-card-header>
<mat-card-title>{{release.name}}</mat-card-title>
<mat-card-subtitle>New Release</mat-card-subtitle>
</mat-card-header>
<a href='/album'><img mat-card-image class="album-cover" src={{release.images[0].url}} alt="album art"></a>
<strong>Release Date: </strong>{{release.release_date}}<br />
<strong>Tracks: </strong>{{release.total_tracks}}<br /><br />
<a style="text-decoration:none" href="/artist">
<mat-card-content *ngFor="let rel of release.artists">
<mat-chip-list aria-label="Artist selection">
<mat-chip>{{rel.name}}</mat-chip>
</mat-chip-list>
</mat-card-content>
</a>
</mat-card>
</div>
例如，如何在每行顯示 5 張卡片？先感謝您。
uj5u.com熱心網友回復：
解決方案在于使用正確的樣式。如果您希望每行只有幾張卡片，則可能必須在包含卡片的容器上使用 max-width。
uj5u.com熱心網友回復：
這是因為你用style: flex. 要解決此問題，您可以在這種情況下為子元素添加此樣式mat-card
style = flex: 20%;
uj5u.com熱心網友回復：
你的風格有點亂。。。
第一：我建議將樣式從 html 中分離出來，使用 css 檔案
第二：卡片沒有被包裝，因為你指定fxLayout="row wrap"了 on mat-card's grandparent，但它不能做wrap任何事情，因為它只有一個孩子，如果你想使用 flexbox 那么flex-flow: row wrap;必須在mat-card'sdirect上宣告parent div，并且 plusmat-card必須有max-width: 20%。
但我會使用grid，只需從 html 中洗掉所有樣式并添加display: grid; grid-template-columns: repeat (5, 1fr);到包含 mat-cards 的 div 中，這將自動將每一行劃分為 5 個等寬的容器并將其他容器包裝到下一行，您不需要添加任何其他內容。
如果您希望它是移動友好的，您只需添加媒體查詢并更改repeat(5,1fr)為repeat(1fr)，當在移動設備中復制時，它將在每行顯示一張卡片
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/439292.html
標籤：javascript html css 有角度的 角度弹性布局