fxLayout: Arranging div as Table on Specific Breakpoint

I’ve encountered a layout requirement to reorganize divs to table when in mobile view.

Large Screen:

Small Screen:

Here are the specifics:

Large Screen: The yellow div holds green divs arranged in a row. Green divs holds 2 red divs on a column.

Small Screen: The yellow div holds green divs arranged in a column. Green divs holds 2 red divs on a row.

Notice that the two resolutions have opposite behavior when arranging the green and red divs. Since flex-layout is already integrated, this should be easier with the help of breakpoints and ngClass.

HTML

<div fxLayout="row" fxLayout.xs="column" class="table" ngClass.xs="table-mobile">
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title A:</div>
    <div fxFlex class="cell">Alpha Content</div>
  </div>
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title B:</div>
    <div fxFlex class="cell">Bravo Content</div>
  </div>
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title C:</div>
    <div fxFlex class="cell">Charlie Content</div>
  </div>
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title D and unusually long string:</div>
    <div fxFlex class="cell">Delta Content the quick brown fox jumps over the lazy dog</div>
  </div>
</div>

CSS

/**main**/
.table-mobile {
    display: table !important;
}

.table-mobile .row {
    display: table-row !important;
}

.table-mobile .cell {
    display: table-cell;
}

Here are some stuff to note:

A. HTML

• We have three div classes: table, row, cell. This will serve as styling classes as well as segments of our markup.

• For the large screen, we told flex-layout the following:
  a. table is arranged into row.
  b. row is arranged into column. This is done thru the fxLayout="row" and fxLayout="column" tags on the divs.

• For the small screen, we told flex-layout the vice-versa of large screen. On this one, we will be using a small screen breakpoint: fxLayout.xs="row". .xs denotes that this will be triggered when the screen resolution has max-width: 599px. You can see details on breakpoints in here.

• Since the requirement wants to enforce a table-like layout on small screen, we used table-mobile css class on .xs breakpoint: ngClass.xs="table-mobile".

• fxFlex was used to equalize the height of the divs when there are uneven spaces left. This will be visible when on large screen.

B. CSS

• We have 3 rules for the 3 segments of our markup that mimics the behavior of <table> element.

• !important tag was used to override the flex-layout styles. Note that in using fxLayout directives, it will automatically attached various styling attributes.

Here is the plunkr demo.

As you play around, try the following:

• on large screen, remove fxFlex
• on small screen, remove ngClass.xs="table-mobile