Class IgxLayoutDirective

コンストラクター

プロパティ

コンストラクター

プロパティ

dir: string = 'row'

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

デフォルト値は rows です。

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

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

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

その他の値は flex-endcenterbaseline、および 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: string = 'flex-start'

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

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

その他の値は flex-endcenterspace-between、および space-around です。

<div
igxLayout
igxLayoutDir="column"
igxLayoutJustify="space-between">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
reverse: boolean = false

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

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

<div
igxLayout
igxLayoutReverse="true">
<div igxFlex>1</div>
<div igxFlex>2</div>
<div igxFlex>3</div>
</div>
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>