угловая гибкая упаковка

Question

У меня есть контейнер макета, в котором отображаются такие элементы:

Мой код:

<div fxLayout="column" fxFlex="50">
  <div fxLayout="row wrap" fxLayout.xs="column wrap" fxLayoutAlign="center center">
    <button mat-stroked-button color="primary" fxFlex="1 3 30" *ngFor="let category of categories">{{category.DISPLAY | translate}}</button>
  </div>
</div>

Я хотел быстрока, чтобы обернуть элементы на основе свободного места.В этом случае я бы хотел, чтобы категория «Электронная почта» занимала все пространство вновь обернутой строки.Любая помощь будет оценена.

Answer 1

простой пример

<div fxLayout="row wrap" fxLayoutAlign="center center" >
      <button mat-stroked-button color="primary" fxFlex="3 0 33.3" *ngFor="let i of [1,2,3,4]">aaaaaaaaa</button>
  </div>