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


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: the igxLayout directive affects the flow directions for that container's immediate children.


Use the igxFlex directive for elements inside an igxLayout parent to control specific flexbox properties.

Name Type Description
igxFlexOrder number Controls in what order are the elements laid out in the flex container. Defaults to 0.
igxFlexGrow number Sets whether an item should grow in a proportion to its peers inside the flex container. Defaults to 1.
igxFlexShrink number Sets whether an items should shrink in a proportion to its peers. Defaults to 1 and negative number are not accepted.


Name Type Description
igxLayoutDir string Sets the default flow direction of the container's children. Defaults to rows.
igxLayoutReverse boolean Defines the direction flex children are placed in the flex container. When set to true, the rows direction goes right to left and columns goes bottom to top.
igxLayoutWrap string By default the immediate children will all try to fit onto one line. The default value nowrap sets this behavior. Other accepted values are wrap and wrap-reverse
igxLayoutJustify string Defines the alignment along the main axis. Defaults to flex-start which packs the children toward the start line. Other possible values are flex-end, center, space-between, space-around
igxLayoutItemAlign string Defines the default behavior for how children are laid out along the corss axis of the current line. Defaults to flex-start. Other possible values are flex-end, center, baseline, and stretch