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.

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

fxLayoutGap does not track whether column-reverse or row-reverse are used.