div内の要素を均等に分割

Question

完全に詰まっています。私は基本的に何をしようとしているのですか： div内の要素を均等に分割して、線の最初の要素が左側の隣にあり、最後の要素が右側の隣にあることを正当化します。より多くの要素がある場合は、次の行に移動してプロセスを繰り返す必要があります。以下は一例です - >

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

私のコード：私は、擬似要素を使ってを試してみました

.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; 
} 

：HTML：

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

私のコードのCSS幅（後： 100％と表示：インラインブロック）、角度の反復を使用すると何とか動作しません。

本当にありがとうございます。

Answer 1

あなたはできませんか？

<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> 

と

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