Constructors

Section titled "Constructors"

IgxLayoutDirective 

new IgxLayoutDirective(): IgxLayoutDirective

Returns IgxLayoutDirective

Properties

Section titled "Properties"

dir

Section titled "dir"

Sets the default flow direction of the container's children.

Defaults to rows.

<div
  igxLayout
  igxLayoutDir="row">
   <div igxFlex>1</div>
   <div igxFlex>2</div>
   <div igxFlex>3</div>
 </div>
dir: string = 'row'

Defined in projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:23

itemAlign

Section titled "itemAlign"

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.

<div
  igxLayout
  igxLayoutDir="column"
  igxLayoutItemAlign="start">
   <div igxFlex igxFlexGrow="0">1</div>
   <div igxFlex igxFlexGrow="0">2</div>
   <div igxFlex igxFlexGrow="0">3</div>
</div>
itemAlign: string = 'stretch'

Defined in projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:100

justify

Section titled "justify"

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.

<div
  igxLayout
  igxLayoutDir="column"
  igxLayoutJustify="space-between">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>
justify: string = 'flex-start'

Defined in projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:80

reverse

Section titled "reverse"

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.

<div
  igxLayout
  igxLayoutReverse="true">
   <div igxFlex>1</div>
   <div igxFlex>2</div>
   <div igxFlex>3</div>
</div>
reverse: boolean = false

Defined in projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:40

wrap

Section titled "wrap"

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.

<div
  igxLayout
  igxLayoutDir="row"
  igxLayoutWrap="wrap">
   <div igxFlex igxFlexGrow="0">1</div>
   <div igxFlex igxFlexGrow="0">2</div>
   <div igxFlex igxFlexGrow="0">3</div>
</div>
wrap: string = 'nowrap'

Defined in projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:60