fxLayout API (original) (raw)
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.
1. One
2. Two
3. Three
4. Four
or
1. One
2. Two
3. Three
4. Four
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 + 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.
1. One
2. Two
3. Three
4. Four
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