角垫芯片一排排显示5

Question

我有角质材料的基本垫片。我试着把它们排成一排，不要让它们的尺寸增加：

Chip1 Chip2 Chip3 Chip4 Chip5 .(空格左)

Chip6 Chip7 Chip8 Chip9 Chip10 .(空格左)

....................................................(space Chip11 Chip12左)。

所以基本上，我不希望芯片的大小在任何情况下都会增加。有可能用柔性箱来做这个吗？我尝试了一些东西: HTML：

<div class='list'>
   <mat-form-field class="example-chip-list" appearance="fill">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" id='item' (removed)="remove(fruit)">
      {{fruit.name}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>
</div>

CSS：

.list{
 width: 100%;
 flex-flow: row wrap;
}

#item{
flex: 1 0 20%; //this is not working because chip's size is increasing to take full width of the div
}

Answer 1

我认为在这一点上使用纯css是无法做到的(尽管我可能错了)。如果您知道您的芯片都是相同的大小，我想您可以使用css网格布局，但我不认为是这样的。我要做的是添加一个额外的html元素，每个N项(在您的例子中是5项)，这将强制中断。

您必须将*ngFor移动到更高的级别(使用ng-container不生成额外的标记)，并使用它的索引来计算是否应该插入额外的项(在您的情况下，每5片芯片之后)：

<div class="list">
  <mat-form-field class="example-chip-list" appearance="fill">
    <mat-label>Favorite Fruits</mat-label>
    <mat-chip-list #chipList aria-label="Fruit selection">
      <ng-container *ngFor="let fruit of fruits; let idx = index;">
        <mat-chip id="item" (removed)="remove(fruit)">
          {{fruit.name}}
          <button matChipRemove>
            <mat-icon>cancel</mat-icon>
          </button>
        </mat-chip>
        <br class="breaker" *ngIf="(idx+1)%5===0" />
      </ng-container>
    </mat-chip-list>
  </mat-form-field>
</div>

我使用<br/>标记，因为它符合语义，但请选择。

然后，只需正确地设置.breaker的样式：

.breaker {
  width:100%;
  content: '';
}

这是一个工作堆闪电战。

请记住，这个解决方案是没有反应的-例如，在一个情况下，5芯片不能适合在一排。但是，您的需求(每行5个芯片)并没有留下很大的空间让它响应。我认为可以通过使用脚本来测量呈现的芯片并在运行时调整布局，但这是您必须根据需求自行解决的问题。