css – 如何在div中制作一个flexbox,以获得2个带有mat-chips / angular material2的ngFor的列？

我有一个@R_613_11262@0个条目的水果列表.我想这样做,以便水果名称文本(在垫片旁边)显示在两列中,每列5个.我正在使用的芯片在这里： https://material.angular.io/components/chips/api

我的CSS：

.flexp {
    display: flex;
    flex-wrap:wrap;
}

.flexc {
    flex-grow: 1;
    display: inline-block;
}

HTML

<div class="flexp" *ngFor="let fruit of fruits">
              <div class="flexc">
                <mat-chip>
                  {{fruit.typeOfFruit}}
                </mat-chip>
                {{fruit.namE}}
              </div>
          </div>

我怎样才能做到这一点？现在我的flexbox从上到下.

我想制作它看起来像一个表,但不必创建结构.如果有一种方法让ngFor足够聪明,以这种方式显示……这就是我要找的东西：

<table>
<tr>
<td>Fruit 1</td><td>Fruit 6</td>
<td>Fruit 2</td><td>Fruit 7</td>
<td>Fruit 3</td><td>Fruit 8</td>
<td>Fruit 4</td><td>Fruit 9</td>
<td>Fruit 5</td><td>Fruit 10</td></tr>
</table>

如果不可能,请说明.

<mat-grid-list cols="2" rowHeight="48px">
    <mat-grid-tile *ngFor="let fruit of fruits">
        <div class="flexc">
            <mat-chip>
                {{fruit.typeOfFruit}}
            </mat-chip>
            {{fruit.namE}}
        </div>
    </mat-grid-tile>
</mat-grid-list>