コンテナーの子要素のデフォルト フロー方向を設定します。

デフォルト値は rows です。

 <div
  igxLayout
  igxLayoutDir="row">
   <div igxFlex>1</div>
   <div igxFlex>2</div>
   <div igxFlex>3</div>
 </div>
Copy

現在の行の交差軸に子要素が配置されるデフォルト動作を定義します。

デフォルト値は flex-start です。

その他の値は flex-end、center、baseline、および 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

主軸での配置を定義します。

デフォルト値は開始線の近くに子要素を配置する flex-start です。

その他の値は 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

フレックス子要素がフレックス コンテナーに配置される方向を定義します。

true に設定される場合、rows は右から左へ、columns は下から上の方向になります。

<div
  igxLayout
  igxLayoutReverse="true">
   <div igxFlex>1</div>
   <div igxFlex>2</div>
   <div igxFlex>3</div>
</div>
Copy

デフォルトで直下の子は単一行に配置されます。

nowrap のデフォルト値でこの動作を設定します。

その他の値は wrap および 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