Layouts Flex (e posicionamento)

    O que é layout Flex?

    O layout Flex é usado para posicionamento de componentes, distribuição de espaço entre itens e redimensionamento. Fornece poderosas capacidades de alinhamento, distribui elementos em colunas ou linhas e ajuda você a criar layouts responsivos de página que se adaptam facilmente a qualquer tamanho de tela.

    Como usar layout Flex?

    Em essência, o layout Flex foi projetado para permitir que os desenvolvedores especifiquem facilmente o tamanho de um contêiner de layout, definam visibilidades e tamanhos de visualização e, consequentemente, encolham ou expandam itens para se adequarem melhor ao espaço disponível.

    Para alcançar tudo isso, a primeira coisa que você deve fazer ao usar o layout Flex é direcionar o contêiner ou elemento pai e ajustar o CSS dos elementos do seu contêiner.

    Como criar layouts Flex no App Builder?

    Para usar o layout Flex no App Builder, você precisa definir um contêiner (que no vídeo é referido como tela). Observe que sua propriedade de exibição está automaticamente definida como Flex. Vá para Visualizações, adicione novo contêiner, escolha layout Flex de linha ou layout Flex de coluna.

    Agora você pode escolher entre diferentes propriedades de layout Flex para definir alinhamento, comportamento padrão de como os itens flex são dispostos, definir outros valores e muito mais.

    Uma das maiores diferenças entre o App Builder e ferramentas regulares de design de produtos são os layouts baseados em flex usados na ferramenta de design para código. Como o App Builder está direcionando aplicativos web, estamos oferecendo Flex como uma das abordagens para criar layouts. Está disponível para você como um componente de layout de linha ou coluna na caixa de ferramentas. O contêiner mais externo que você vê aqui é a tela e já tem configurações flex aplicadas a ela. Você pode alterar o tamanho da tela editando o tamanho da visualização no painel de propriedades.

    edit-create-canvas-size-Indigo-Design-App-Builder

    Alterar tamanho da tela

    Layout de linha e coluna

    Os contêineres de layout Flex têm configurações que nos permitem modificar a posição dos elementos de interface do usuário aninhados. Existem propriedades flex para propriedades h.align e v.align que podem ser facilmente aplicadas a partir dos respectivos menus suspensos. A tela padrão é o layout de linha, alinhado horizontalmente à esquerda e estendido verticalmente. Você sempre pode alternar entre layout de linha e coluna, independentemente do que começou. O contêiner de layout é dimensionado com base no conteúdo, mas você sempre pode especificar uma altura e largura. Você também pode adicionar a propriedade de preenchimento ao contêiner e margens para espaçar os elementos de interface do usuário filho - isso pode ser feito após selecionar um componente específico e editar o preenchimento ou margem no Painel de Propriedades no lado direito da tela.

    row-column-layout-Indigo-Design-App-Builder

    Propriedades de layout

    Você sempre pode selecionar o elemento de interface do usuário pai clicando no rótulo do elemento filho. Isso é útil quando você tem contêineres de layout aninhados. Por outro lado, você também pode selecionar o componente que deseja diretamente do menu Outline no canto inferior esquerdo.

    select-parent-Indigo-Design-App-Builder

    Selecionar componente pai

    Redimensionamento fluido e envolvimento

    As outras propriedades notáveis estão relacionadas a crescimento e encolhimento. Estas afetam o redimensionamento de componentes quando o tamanho da visualização muda. Definir um componente como grow expandirá um contêiner na direção de linha se for layout de linha ou na direção de coluna se for layout de coluna.

    grow-column-row-layout-Indigo-Design-App-Builder

    Opção de layout de coluna/linha crescente

    Adicionar ao layout via menu de contexto

    Se você tiver a necessidade de adicionar um componente existente a um novo layout, existe uma opção muito útil – clicando com o botão direito em um componente selecionado, você pode abrir o menu de contexto e adicionar o elemento a um layout de linha ou coluna.

    add-to-layout-Indigo-Design-App-Builder

    Adicionar componente ao layout através do menu de contexto

    Recursos Adicionais

    Para resumir rapidamente, tudo que você aprendeu sobre layouts Flex pode ser usado aqui no editor conforme está. Para alguém novo em Flex e CSS, levará um tempo para se acostumar, mas com o tempo ficará muito mais fácil pensar em layouts como linhas e colunas. O mais importante é que o layout Flex nos ajuda a criar aplicativos que se adaptam ao tamanho de uma tela e definir o comportamento dos componentes dentro do layout, enquanto o layout absoluto nos permite ter um design específico para apenas um tamanho de tela.