Skip to main content

FxLayout

The fxLayout directive should be used on DOM containers whose children should layout or flow as the text direction along the main-axis or the cross-axis.

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

or

<div fxLayout="column">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

fxlayout

fxLayout Options​

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

ValueEquivalent CSS
'' (default)flex-direction: row
rowflex-direction: row
row-reverseflex-direction: row-reverse
columnflex-direction: column
column-reverseflex-direction: column-reverse

fxLayout + wrap​

By default, flex items will not wrap in their container. Formerly published as distinct directive, fxLayoutWrap was deprecated in favor of simply adding the wrap parameter as a secondary option to the fxLayout directive.

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

Note: when using wrap, developers must first specify the layout direction.

fxLayout Side-Effects​

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

  • fxLayoutGap
  • fxFlex
  • fxLayoutAlign