0
351
Visualizações¿Cómo hacer 5 cartas en cada línea?
¿Puede alguien ayudarme por favor?
Estoy escribiendo en Angular y quiero mostrar, por ejemplo, 5 tarjetas en cada fila. Ahora tengo desplazamiento horizontal, y se ve así: 
Código:
<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>¿Cómo puedo mostrar 5 cartas en cada fila, por ejemplo? Gracias de antemano.
3 Respostas
Responde à pergunta0
La solución está en usar los estilos correctos. Si desea tener pocas tarjetas en cada fila, es posible que deba usar max-width en el contenedor que contiene las tarjetas.
0
porque lo envuelves todo con style: flex . para solucionar esto, puede agregar este estilo para el elemento secundario, en este caso es mat-card
style = flex: 20%;0
Tus estilos son un poco desordenados...
Primero: recomiendo separar el estilo de html, usar archivos css
Segundo: las tarjetas no se envuelven porque especificas fxLayout="row wrap" en mat-card's grandparent , pero no puede wrap nada porque solo tiene un hijo, si quieres usar flexbox entonces flex-flow: row wrap; debe declararse en el parent div directo mat-card's , y plus mat-card debe tener max-width: 20% .
Pero usaría grid , simplemente eliminaría todos los estilos de html y agregaría display: grid; grid-template-columns: repeat (5, 1fr); al div que contiene mat-cards, esto dividirá automáticamente cada fila en 5 contenedores de igual ancho y envolverá los otros en la siguiente fila, no necesita agregar nada más.
Si desea que sea compatible con dispositivos móviles, simplemente agregue una consulta de medios y cambie repeat(5,1fr) a repeat(1fr) y mostrará una tarjeta en cada fila, cuando se reproduzca en dispositivos móviles