Angular Layout Manager Directives Overview
The Ignite UI for Angular Layout Directives allow developers to specify a layout direction for any children of the container it is applied to. Layout can flow vertically or horizontally, with controls for wrapping, justification, and alignment.
Angular Layout Manager Example
Usage
Use the igxLayout directive on a container element to specify the layout direction for its children:
Horizontally with Row direction
Use igxLayoutDir ="row".
Vertically with Column direction
Use igxLayoutDir ="column".
Note
Reverse order using igxLayoutReverse ="true".
Customize the order of the elements
Customize the order of the element by using igxFlexOrder.
Change element spacing
Use igxLayoutJustify ="space-between | space-around".
Position elements along the main axis
Use igxLayoutJustify ="flex-start | center | flex-end" to specify the elements position along the main axis according to your preferences.
Position elements along the cross axis
Use igxLayoutItemAlign ="flex-start | center | flex-end" to specify the elements position along the cross axis according to your preferences.
You can also wrap elements
Use igxLayoutWrap ="wrap".
Note
The igxLayout directive affects the flow directions for that
container's immediate children.
Nesting
Use the igxFlex directive for elements inside an igxLayout parent to control specific flexbox properties.