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

Either margin-right or margin-bottom are used to create gaps; dependent upon the flow direction of the parent container.

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>

Note that the last child item will NOT have a margin gap specified; only the inside gaps are specified.

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.