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.

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

or

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

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

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.

<divfxLayout="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.

There are some instances where developers want to use the inline-flex CSS display property, instead of the default. Angular Layout provides this option by accepting a secondary argument to the fxLayout directive as follows:

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

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

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

• fxLayoutGap
• fxFlex
• fxLayoutAlign