igniteui-angular-sovn
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
30 lines (23 loc) • 2.16 kB
Markdown
# igxLayout
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"`.
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout.html)
**Note**: the `igxLayout` directive affects the flow directions for that
container's **immediate** children.
# API Summary
| 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` |
# igx-flex
Use the `igxFlex` directive for elements inside an `igxLayout` parent to control specific flexbox properties.
# API Summary
| 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 propotion to its peers inside the flex container. Defaults to `1`. |
| `igxFlexShrink` | number | Sets whether an items should shrink in a propotion to its peers. Defaults to `1` and negative number are not accepted. |