Angular mat-chips 连续显示 5 个

Question

I have the basic mat-chips from angular material. What I'm trying is to put them 5 on a row, without their size to increase:
Chip1 Chip2 Chip3 Chip4 Chip5 ..................(space left)
Chip6 Chip7 Chip8 Chip9 Chip10 ...............(space left)
Chip11 Chip12 ....................................................(space left).

So basically, I dont want the size of the chips to increase in any circumstances. Is there any possibility to do this with flexbox? I tried something: 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

I don't think this can be done using pure css at this point (though I might be wrong). If you knew your chips are all of the same size, I suppose you could go with css grid layout, but I don't believe that's the case here. What I would do is to add an additional html element every N items (5 in your case) that would force the break.

You would have to move the *ngFor to a higher level (use ng-container to not generate extra markup) and use it's index to calculate whether an extra item should be inserted or not (in your case after every 5th chip):

<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>

I went with <br/> tag since it fits semantically, but take your pick.

Then, just style the .breaker properly:

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

Here's a working stackblitz .

Have in mind that this solution is not responsive - eg in a case when 5 chips can't fit in a single row. But then again, your requirements (5 chips per row) doesn't leave much room for making it responsive. I suppose it could be adapted by measuring the rendered chips and adjusting the layout on the run using script, but that's something you'd have to figure out on your own based on the requirements.