Preparing search index...
The search index is not available

クラス IgxLayoutDirective

階層

IgxLayoutDirective

プロパティ

dir

dir: string = "row"

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

デフォルト値は rows です。

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

itemAlign

itemAlign: string = "stretch"

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

デフォルト値は 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>

justify

justify: string = "flex-start"

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

デフォルト値は開始線の近くに子要素を配置する 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>

reverse

reverse: boolean = false

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

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

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

wrap

wrap: string = "nowrap"

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

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>