Layout and Flex Specifications

igxLayout directive should be used to arrange elements, organize screen content and add/improve the structure of overlay elements.

Objectives

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

User Stories

Developer

As a developer I want to be able to provide a way to adapt to any possible screen size easily and manage content reflows on different screens.

<span igxLayout >
...
</span>

End user

The igxLayout should provide a way to visualize different contents on a screen/page.

Acceptance criteria

1. Manage flow direction.
2. Operate with flex children.
3. Define different alignments.
4. Mange how children are laid out.

API

• igxLayoutDir - Sets the default flow direction of the container's children. Defaults to rows.
• igxLayoutReverse - 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 - 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 - 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 - 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.

igxFlex directive

It is used for elements inside an igxLayout parent to control specific flexbox properties.

API

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