How to Line break in angular flex-layout so component will display in the new line

Question

I have a layout like that:

<div fxLayout="row" fxFill fxLayoutAlign="start start">
    <app-comp1 class="comp"></app-comp1>
    <app-comp2 class="comp"></app-comp2>
    <app-comp3 class="comp"></app-comp3>
</div>

Each component (comp1, comp2, etc) etc represent a widget. I have my components size (comp1, comp2, etc) set in CSS

.comp {
  width: 700px;
  height: 500px;
}

The problem is that if add more widgets (app-comp4, etc) they all displaying in one line but I want widget to show in new line if there is no space in current line. The number of widgets is dynamic and the widget size controlled by css not by fxFlex="xxx%", so I can not use fxFlex="xxx%".

Any thought how to implement that?

Answer 1

You can use fxLayout="row wrap"

Here is stackblitz example of how it works... basically will wrap content to new row based on container width... Shrink the width of the preview in stackblitz and test boxes will wrap down to next row.

Here is link to additional information on the wiki

https://github.com/angular/flex-layout/wiki/fxLayout-API#fxlayout--wrap

Stackblitz

https://stackblitz.com/edit/angular-material-flex-layout-seed-bvbudh?file=app%2Fquestionaire.component.ts