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).

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