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

前端之家收集整理的这篇文章主要介绍了css – 如何在div中制作一个flexbox,以获得2个带有mat-chips / angular material2的ngFor的列?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含10个条目的水果列表.我想这样做,以便水果名称文本(在垫片旁边)显示在两列中,每列5个.我正在使用的芯片在这里: https://material.angular.io/components/chips/api

我的CSS:

  1. .flexp {
  2. display: flex;
  3. flex-wrap:wrap;
  4. }
  5.  
  6. .flexc {
  7. flex-grow: 1;
  8. display: inline-block;
  9. }

HTML

  1. <div class="flexp" *ngFor="let fruit of fruits">
  2. <div class="flexc">
  3. <mat-chip>
  4. {{fruit.typeOfFruit}}
  5. </mat-chip>
  6. {{fruit.name}}
  7. </div>
  8. </div>

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

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

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

如果不可能,请说明.

解决方法

MatGridList就是出于这个原因而提供的.
  1. <mat-grid-list cols="2" rowHeight="48px">
  2. <mat-grid-tile *ngFor="let fruit of fruits">
  3. <div class="flexc">
  4. <mat-chip>
  5. {{fruit.typeOfFruit}}
  6. </mat-chip>
  7. {{fruit.name}}
  8. </div>
  9. </mat-grid-tile>
  10. </mat-grid-list>

stackblitz example.

猜你在找的CSS相关文章