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: 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.
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. |
API
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 |