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 fxLayoutWrap to wrap rows or columns, developers should account for the gap sizes when specifying the child item sizes (using fxFlex).

Rendered Layout without gap considerations:

Rendered Layout *WITH gap considerations:

---

<md-card fxFlex fxFlexAlign="start">

    <md-card-content>
      <div fxLayout fxLayout.xs="column" fxLayoutWrap 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="Compnay">
        </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>