fxLayoutGap API - ngbracket/ngx-layout GitHub Wiki

The fxLayoutGap directive should be used on to specify margin gaps on children within a flexbox container (e.g. nested within a fxLayout container).

margin-right used when the parent container flex-direction == "row"
margin-bottom used when the parent container flex-direction == "column"

Note that the last child item will NOT have a margin gap specified; only the inside gaps are specified. Additionally, fxLayoutGap does not respond to reveresed flow directions: column-reverse or row-reverse are used.

Examples:

Flex-Direction: Row

<div fxLayout="row">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

lg_1

<div fxLayout="row" fxLayoutGap="20px">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

lg_2

Flex-Direction: Column

<div fxLayout="column">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

fxLayout_column

<div fxLayout="column" fxLayoutGap="20px">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

fxLayout_column_gap

Using fxLayoutGap with Wrap

When using wrap with fxLayout to wrap rows or columns, developers should account for the gap sizes when specifying the child item sizes (using fxFlex).

Issue: Rendered Layout without gap considerations:

screen shot 2017-05-20 at 4 03 37 pm

Solution: Rendered Layout with gap considerations:

<md-card fxFlex fxFlexAlign="start">
  <md-card-content>
    <div fxLayout fxLayout.xs="column wrap" fxLayoutGap="25px">
      <md-input-container fxFlex="calc(50% - 25px)">
        <input mdInput placeholder="Name" />
      </md-input-container>
      <md-input-container fxFlex="calc(50% - 25px)">
        <input mdInput placeholder="Occupation" />
      </md-input-container>
      <md-input-container fxFlex="calc(50% - 25px)">
        <input mdInput placeholder="Company" />
      </md-input-container>
    </div>
  </md-card-content>

  <md-card-actions>
    <button md-button>Anterior</button>
    <button md-button>Proximo</button>
  </md-card-actions>
</md-card>