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

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

    Horizontally with Row direction

    Use igxLayoutDir="row".

    EXAMPLE

    Vertically with Column direction

    Use igxLayoutDir="column".

    EXAMPLE

    Reverse order using igxLayoutReverse="true".

    Customize the order of the elements

    Customize the order of the element by using igxFlexOrder.

    EXAMPLE

    Change element spacing

    Use igxLayoutJustify="space-between | space-around".

    EXAMPLE

    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.

    EXAMPLE

    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.

    EXAMPLE

    You can also wrap elements

    Use igxLayoutWrap="wrap".

    EXAMPLE

    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