css - 如何使用 mat-chips/angular material2 的 ngFor 使 div 中的 flexbox 具有 2 列？

Question

我有一个包含 10 个条目的水果列表。我想让水果名称文本(垫片旁边)显示在两列中，每列有 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>

如果不可能，请说明。

Answer 1

我假设您作为示例给出的表格代码是错误的，因为您提到您想要 2 列 5 行，这与此等效。下面的答案是有一个类似于这里表格的显示

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

如果要使用flex，需要设置flow-direction为column，并且在容器上有一个max-height，等于容器高度的5倍一行

scss

$rowHeight: 40px;
.flexp {
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    max-height: calc(5 * #{$rowHeight});
}

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

html

<mat-chip-list>
    <div class="flexp">
     <div class="flexc" *ngFor="let fruit of fruits">

        <mat-chip>
          {{fruit.typeOfFruit}}
        </mat-chip>
        {{fruit.name}}
      </div>
    </div>
</mat-chip-list>

其他不使用flex的方案

您可以使用 column-count属性

scss

$rowHeight: 40px;
.fruitContainer {
    column-count: 2;
    max-height: calc(5 * #{$rowHeight});
}

.fruit {
    height: $rowHeight;
}

html

<mat-chip-list>
    <div class="fruitContainer">
     <div class="fruit" *ngFor="let fruit of fruits">
        <mat-chip>
            {{fruit.typeOfFruit}}
                    </mat-chip>
                    {{fruit.name}}
    </div>

</div>
</mat-chip-list>

Stackblitz demo

结果如下