fxLayoutGap API

The fxLayoutGap directive should be used on to specify margin gaps on children within a flexbox container (e.g. nested within a fxLayout container). There is a secondary mode to enable a gutter system with a margin applied on the host element.

Default Mode

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

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

Flex-Direction: Column

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

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

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:

---

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>

Grid Mode

To use fxLayoutGap with a gutter system, simply append the suffix grid to any fxLayoutGap value. For instance:

<div fxLayoutGap="16px grid">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

This creates a gutter system by applying a margin to the host element and an inverse padding to each child. Other than this change, it works exactly as the default mode. It also takes flex-order and hidden elements into account, and has the same responsive abilities as the default mode.

Please note that unlike the standard gap functionality, fxLayoutGap with the grid keyword applies a padding to each child element to add the gutter, in addition to the margin on the host element.