элементы упаковки угловой гибкой компоновки увеличиваются и сжимаются

#flexbox #angular-flex-layout

#flexbox #angular-flex-layout

Вопрос:

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

введите описание изображения здесь

Мой код:

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

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

Ответ №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>