Split éléments également à l'intérieur div

Question

Je suis complètement coincé. Ce que j'essaie de faire: Je veux diviser les éléments à l'intérieur de div de la même manière et justifie que le premier élément sur la ligne soit à côté du côté gauche et le dernier élément sur la ligne soit à côté du côté droit. S'il y a plus d'éléments, il faut aller à la ligne suivante et répéter le processus. Voici un exemple ->

{A | B | C | D} 
{E | K 

Mon code: HTML:

<div class="webso-products"> 
    <div [ngClass]="'ui card webso-card'" *ngFor="let product of allProducts"> 
     <app-product></app-product> 
    </div> 
</div> 

Mon code CSS:

.webso-products { 
    display: block; 
    width: 100%; 
    height: auto; 
    text-align: justify; 
} 

.webso-products .webso-card { 
    display: inline-block; 
    background-color: #1b2a47; 
    border: none; 
    box-shadow: none; 
    padding: 1rem 1rem 0rem 1rem; 
} 

J'ai essayé en utilisant un élément pseudo: après (avec une largeur: 100% et affichage: inline-block), mais de toute façon cela ne fonctionne pas avec l'itération angulaire ...

Vraiment apprécier pour votre aide.

Answer 1

Ne pouvez-vous pas simplement faire?

<div class="webso-products"> 
    <div [ngClass]="'ui card webso-card'" *ngFor="let product of allProducts"> 
     <div class="webso-card-product"> 
      <app-product></app-product> 
     </div> 
    </div> 
</div> 

et

.webso-card{display:flex; flex-direction:row} 
.webso-card-product{width=25%} 
@media #{...} { 
    .webso-card-product{width=...} 
}