Angular 레이아웃 관리자 지시문 개요

    Ignite UI for Angular 하면 개발자는 이 지시문이 적용되는 컨테이너의 하위 항목에 대한 레이아웃 방향을 지정할 수 있습니다. 레이아웃은 줄 바꿈, 자리맞추기, 정렬을 제어하여 수직 또는 수평으로 흐를 수 있습니다.

    Angular Layout Manager 예제

    용법

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

    행 방향으로 수평으로

    ​igxLayoutDir="row" 사용하세요.

    Column 방향과 함께 수직으로

    ​igxLayoutDir="column" 사용하세요.

    메모

    ​igxLayoutReverse="true" 사용하여 역순으로 수행합니다.

    요소의 순서를 사용자 지정합니다

    ​igxFlexOrder 사용하여 요소의 순서를 맞춤설정하세요.

    요소 간격 변경

    ​igxLayoutJustify="space-between | space-around" 사용하세요.

    주 축을 따라 요소 배치Position elements along the main axis

    ​igxLayoutJustify="flex-start | center | flex-end" 사용하여 기본 설정에 따라 주축을 따라 요소 위치를 지정하세요.

    교차 축을 따라 요소 배치

    ​igxLayoutItemAlign="flex-start | center | flex-end" 사용하여 기본 설정에 따라 교차축을 따라 요소 위치를 지정합니다.

    요소를 래핑할 수도 있습니다

    ​igxLayoutWrap="wrap" 사용하세요.

    메모

    ​igxLayout 지시문은 해당 컨테이너의 직계 하위 항목에 대한 흐름 방향에 영향을 미칩니다.

    중첩

    특정 igxLayout 속성을 제어하려면 igxLayout 상위 요소 내부의 요소에 대해 igxFlex 지시어를 사용하세요.

    API 참조