@angular/flex-layout performs extremely well for most usage scenarios EXCEPT large tables.

Developers generating dynamic tables (using *ngFor) should be aware of performance impacts using Flex-Layout directives.

For small number of rows (e.g. < 100), @angular/flex-layout is a excellent choice for layouts. Consider the table definition below were each row has column elements; each using a fxFlex. Since the directives apply styles inline for each element in each row, large tables may manifest performance impacts with dynamic inline stylings.

<div*ngFor="let obj of data" fxLayoutfxLayout.xs="column"><divfxFlex="40">{{obj.origin}}</div><divfxFlex="40">{{obj.destination}}</div><divfxFlex="20">{{obj.price}}</div></div>

Note that both the initial and media-query-triggered layout phase manifest redraw-performance issues.

Dynamic-inline-styling performance impacts are especially noticeable for column layouts.

Developers should note that FlexBox CSS with flex-direction = "column" requires significantly more webkit engine processing to properly adjust column heights and layout the composition. Reduce the demo viewport size to < 600px (to force a column direction layout).

For responsive table layouts with large number of rows, developers should use the responsive class API to specify a flexbox CSS style class instead of inline flexbox styles.

Below we are using the responsive class and class.xs API to specify class names. Notice that mobile devices will use a flow-direction == "column":

<div*ngFor="let obj of data" class="flow row" class.xs="flow column"><divclass="item_40">{{obj.origin}} </div><divclass="item_40">{{obj.destination}} </div><divclass="item_20">{{obj.price}} </div></div>

.flow{display: flex; box-sizing: border-box; -webkit-box-direction: normal; .row{flex-direction: row; -webkit-box-orient: horizontal} .column{flex-direction: column; -webkit-box-orient: vertical; height:100px; /* important for sizing of row heights */margin-bottom:20px} } .item_40, .item_20{flex:11100%; box-sizing: border-box; -webkit-box-flex:1} .row .item_40{max-width:40%} .row .item_20{max-width:20%} .column .item_40{max-height:40%} .column .item_20{max-height:20%}

This class-based approach performs very well by leveraging stylesheets instead of inline-styles. Here is an online StackBlitz - Flex-Layout Performance that demonstrates the issue (see Use fxLayout button) and solution (see Use CSS button).