Tengo un Listado de 12 personas y quiero recorrerlo con un ngFor con flexbox , pero uno se pone debajo del otro, deseo poner 3 por cada fila Alguien ha logrado implementarlo?
1 respuesta
html:
<div fxLayout="row wrap">
<div *ngFor="let persona of personas" fxFlex="33">
{{persona.name}}
</div>
</div>
Explicación del código: son dos etiquetas divs, en el primero agregue las propiedades row
y wrap
, row
para que todo su contenido tome como fila, y el wrap hace que los estilos de la propiedad se apliquen a una o mas líneas de ser necesarios.
En el segundo div(interna) recorro la lista personas(cree un modelo con propiedad code
y name
por si se recorra un objeto), y le aplico fxFlex="33"
para que tome max-width: 33%;
cada div que se cree en el bucle, cuando la sumatoria de width sea mayor a 100 creara una nueva linea y el ultimo elemento bajara a la siguiente linea.
Si desea dos columnas cambiar fxFlex="33"
por fxFlex="50"
typescript:
public personas = [
{
name: 'persona1',
code: 1
},
{
name: 'persona2',
code: 2
},
{
name: 'persona3',
code: 3
},
{
name: 'persona4',
code: 4
},
{
name: 'persona5',
code: 5
},
{
name: 'persona6',
code: 6
},
{
name: 'persona7',
code: 7
},
{
name: 'persona8',
code: 8
},
{
name: 'persona9',
code: 9
},
{
name: 'persona10',
code: 10
},
{
name: 'persona11',
code: 11
},
{
name: 'persona12',
code: 12
},
];
display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr);
– Gleycer Parra el 9 mar. 20 a las 20:51