Angular 레이아웃 관리자 지침 개요

    Ignite UI for Angular 하면 개발자가 적용되는 컨테이너의 모든 자식에 대한 레이아웃 방향을 지정할 수 있습니다. 레이아웃은 수직 또는 수평으로 흐를 수 있으며 래핑, 정렬 및 정렬을 위한 컨트롤이 있습니다.

    Angular Layout Manager Example

    Usage

    컨테이너 요소에 igxLayout 지시문을 사용하여 해당 하위 항목의 레이아웃 방향을 지정합니다.

    Horizontally with Row direction

    Use igxLayoutDir="row".

    Vertically with Column direction

    Use igxLayoutDir="column".

    Note

    Reverse order using igxLayoutReverse="true".

    Customize the order of the elements

    Customize the order of the element by using igxFlexOrder.

    Change element spacing

    Use igxLayoutJustify="space-between | space-around".

    Position elements along the main axis

    Use igxLayoutJustify="flex-start | center | flex-end" to specify the elements position along the main axis according to your preferences.

    Position elements along the cross axis

    Use igxLayoutItemAlign="flex-start | center | flex-end" to specify the elements position along the cross axis according to your preferences.

    You can also wrap elements

    Use igxLayoutWrap="wrap".

    Note

    The igxLayout directive affects the flow directions for that container's immediate children.

    Nesting

    Use the igxFlex directive for elements inside an igxLayout parent to control specific flexbox properties.

    API References