Visão geral das diretivas do Angular Layout Manager

    As diretivas de layout do Ignite UI for Angular permitem que os desenvolvedores especifiquem uma direção de layout para quaisquer filhos do contêiner ao qual ele é aplicado. O layout pode fluir vertical ou horizontalmente, com controles para quebra, justificação e alinhamento.

    Angular Layout Manager Example

    Usage

    Use a diretiva igxLayout em um elemento de contêiner para especificar a direção do layout para seus filhos:

    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