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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy