Angular: как заставить элементы перейти на новый ряд?

Question

У меня есть HTML-страница для компонента, и я хотел бы заставить элементы из массива перейти на новую строку, используя fxLayout.
Например, у меня есть список из 11 элементов, я хочу, чтобы в первом ряду было 5 элементов, во втором - 5 элементов, а в третьем - последний.

РЕДАКТИРОВАТЬ: количество элементов в строке не должно быть установлено, так что он может меняться в зависимости от размера экрана. Теперь у меня может быть заданное количество элементов в строке, но оно не меняется, за исключением очень маленького экрана.

Как я могу это сделать?
Это мой код:

<div class="boards" fxFlexWrap="wrap" fxLayoutGap="1em" fxLayout="row">
  <mat-card fxFlex fxLayoutAlign="center" *ngFor="let board of boards | async">
    {{board.name}}
  </mat-card>
</div>

решаемые

Answer 1

вы можете установить fxLayout="row wrap" для flex-контейнера и установить fxFlex="20%" для flex-элементов (дочерних элементов)

<div fxLayout="row wrap">
  <div fxFlex="20%" *ngFor="let item of items">
    {{item}}
  </div>
</div>

так как вы устанавливаете гибкий зазор, вы должны также учитывать его для ширины гибких элементов.

<div fxLayout="row wrap" fxLayoutGap="1em">
  <div fxFlex="0 0 calc(20% - 1em)" *ngFor="let item of items">
    {{item}}
  </div>
</div>

и если вы хотите избавиться от пробела в конце каждой строки, вам нужен небольшой трюк CSS

<div class="boards" fxLayout="row wrap" fxLayoutGap="1em">
  <div fxFlex="0 0 calc(20% - 0.8em)" *ngFor="let item of items">
    {{item}}
  </div>
</div>

с

.boards :nth-child(5n){
  margin-right: 0 !important;
}

вот рабочая демоверсия https://stackblitz.com/edit/angular-unxtaq

Answer 2

Попробуйте:

HTML

<div class="boards" fxFlexWrap="wrap" fxLayoutGap="1em" fxLayout="row">
 <mat-card class="custom-card" fxFlex fxLayoutAlign="center" *ngFor="let board of boards | async">
    {{board.name}}
  </mat-card>
</div>

CSS (styles.css)

.custom-card {
  width: 20% !important;
  display: inline-block !important;
  position: relative !important;
}