Layout Manager

The Ignite UI for Angular Layout Directive allows 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.

Layout Demo

Usage

Use the igxLayout directive on a container element to specify the layout direction for its children:

Horizontally with igxLayoutDir="row"
Or vertically with igxLayoutDir="column".

Note: Reverse order using igxLayoutReverse="true".

Customize the order of the elements using igxFlexOrder.
Change element spacing using igxLayoutJustify="space-between | space-around".
Position elements along the main axis using igxLayoutJustify="flex-start | center | flex-end".
Position elements along the cross axis using igxLayoutItemAlign="flex-start | center | flex-end".
You can also wrap elements using 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.

API References