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

DOM containers whose children should layout or flow as the text direction along the main-axis or the cross-axis.

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

or

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

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

fxLayout Options

Shown below are the supported fxLayout directive values and their resulting CSS stylings on the hosting element container:

Value	Equivalent CSS
'' (default)	{flex-direction: row}
row	{flex-direction: row}
row-reverse	{flex-direction: row-reverse}
column	{flex-direction: column}
column-reverse	{flex-direction: column-reverse}

fxLayout Side-Effects

Changes to the fxLayout value will cause the following directives to update and modify their element stylings:

• fxLayoutGap
• fxFlex
• fxLayoutAlign