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.

    API References