在 div 内平均分割元素

Question

我完全被困住了。我基本上想做什么： 我想平均分割 div 内的元素，并证明行上的第一个元素将在左侧旁边，而行上的最后一个元素将在右侧旁边。如果有更多元素，它应该转到下一行并重复该过程。下面是一个例子 ->

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

我的代码：HTML：

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

我的代码 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; 
}

我尝试过使用伪元素：after（宽度：100% 和显示：inline-block），但不知何故在使用 Angular 迭代时它不起作用。 .

非常感谢您的帮助。

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