CODEWITHSUNDEEP
flexboxangular-flex-layout
npabs18
npabs18

Reputation: 167

angular flex layout wrap items grow and shrink

I have a layout container that shows items like this:

enter image description here

My code:

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

I would like the row to wrap the items based off the space available. In this case, I would like the "Email" category to take up the entire space of the newly wrapped row. Any help would be appreciated.

Upvotes: 1

Views: 3786

Answers (1)

jcuypers
jcuypers

Reputation: 1794

simple example

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

Upvotes: 2

Related Questions