Como usar layouts Flexbox no Construtor de IU

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 5 min. de leitura

    • Crie um layout Flexbox em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.

    Você pode criar facilmente páginas personalizadas com layouts Flexbox em Construtor de IU. Personalizar o layout da página permite que você aproveite ao máximo o Flexbox para que possa alcançar o design geral da página. Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.

    Flexbox é um sistema de layout unidimensional em CSS. O Flexbox é inerentemente flexível, o que é útil quando você não sabe o tamanho do seu conteúdo. Se você planeja criar páginas complexas, pode personalizar o layout da página na guia de estilos do painel de configuração ou com CSS. Visite a Mozilla para saber mais sobre o Flexbox.

    Você pode mudar a direção do seu conteúdo no layout das seguintes maneiras:
    • Linha: as linhas são organizadas da esquerda para a direita ou da direita para a esquerda, dependendo da direção do idioma padrão do navegador. Esquerda/direita é o caso de um navegador em inglês.
    • Reversão de linha: as linhas são organizadas na direção reversa do idioma padrão do navegador, como da direita para a esquerda ou da esquerda para a direita.
    • Coluna: para cima/para baixo ou para baixo/para cima
    • Inversão de coluna: para baixo/para cima
      Figura 1. Direções de linha e coluna do Flexbox
      Diagrama mostrando as direções de linha e coluna do Flexbox.
    • Justificar conteúdo: define o alinhamento ao longo do eixo principal. Estas são as opções:
      • Início flexível: os itens estão no início da direção flexível, semelhante ao conteúdo justificado à esquerda. Esta é a configuração padrão.
      • Final flexível: os itens estão no final da direção flexível, semelhante ao conteúdo justificado à direita.
      • Espaço entre: os itens são distribuídos uniformemente.
      • Espaço ao redor: os itens são distribuídos uniformemente com o mesmo espaço ao redor deles.
      • Espaçamento uniforme: o espaçamento entre itens é igual a.
    • Alinhar itens: define como você deseja que o conteúdo flexível seja exibido ao longo do eixo cruzado. Estas são as opções:
      • Esticar: estique o conteúdo para preencher o contêiner. Esta é a configuração padrão
      • Início flexível: coloque o conteúdo no início do eixo cruzado.
      • Flex-end: coloque seu conteúdo no final do eixo cruzado.
      • Centralizar: centraliza o conteúdo no eixo cruzado.
      • Sistema de base: alinhe o conteúdo da mesma forma que a linha de base alinhamento.
    • Altura: defina a altura automaticamente ou manualmente.
    • Largura: defina a altura dos itens do flexbox automaticamente ou manualmente.
    • Margem: defina a distância mínima entre os itens do flexbox.
    • Preenchimento: defina o preenchimento para cada lado dos itens do flexbox.

    Criar um layout Flexbox com o novo sistema de layout

    Crie um layout Flexbox em Construtor de IU para criar páginas poderosas em um ambiente low-code.

    Antes de Iniciar

    Função necessária: administrador

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
    3. Criar uma página no Construtor de IU.
    4. Selecione o botão + Adicionar conteúdo na fase Construtor de IU.
    5. Selecione Flexbox na guia Layouts.
      Seta apontando para a opção Flexbox na guia Layouts da caixa de ferramentas.
    6. Selecione a guia Estilos no painel de configuração.
    7. Na seção Layout, você deve ver o Flexbox realçado.
      Seta apontando para a opção Flexbox na guia de estilos do painel de configuração.
    8. Na seção Layout da guia de estilos, você pode alterar o seguinte:
      Direção
      Defina como você deseja que os componentes sejam empilhados, horizontalmente ou verticalmente.
      Alinhar itens
      Defina como os componentes nos contêineres se alinham como um grupo.
      Justificar conteúdo
      Defina como empacotar ou separar os componentes no contêiner.
      Nota:
      Selecione Mostrar opções avançadas de layout para ver as próximas duas opções.
      Gap
      Defina o tamanho do espaço entre linhas e colunas.
      Quebrar elementos secundários em várias linhas
      Defina se os componentes são forçados em uma linha ou estourados em várias linhas.

      Visite a Mozilla para saber mais sobre as configurações de layout do Flexbox.

    9. Opcional: Você pode editar o código CSS selecionando Mostrar opções de configuração avançadas na parte inferior da guia Estilos e selecionando a opção Exibir e editar CSS.
    10. Selecione Save (Salvar).
      Sua página é atualizada e exibe as mudanças feitas no layout.
    11. Adicione componentes à sua página.
      Para obter mais informações, consulte Adicionar e configurar componentes.
    12. Exiba e teste sua página selecionando o botão Visualizar que abre a variante de página..

    Criar um layout Flexbox com o sistema de layout antigo

    Crie um layout Flexbox em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.

    Antes de Iniciar

    Função necessária: administrador

    Por Que e Quando Desempenhar Esta Tarefa

    No procedimento a seguir, você aprende a usar o Flexbox para alterar o código CSS e personalizar o layout da página.

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
    3. Criar uma página no Construtor de IU ou abrir uma página.
    4. Clique na guia Layout e escolha o layout de duas colunas.
      Figura 2. Layout de duas colunas padrão
      Layout padrão de duas colunas.
    5. Clique em Editar código de layout.
      Figura 3. Editar o código de layout
      Edite o código de layout.
    6. Expanda o editor de código para que você possa exibir facilmente o código CSS.
      Figura 4. Expandir o editor de código
      Seta apontando para expandir o botão do editor de código.
    7. Adicione outro slot ao layout copiando o código CSS de um slot existente.

      Copiar o código é mais fácil do que digitá-lo no layout.

      Figura 5. Copiar o código CSS de um slot
      Seta apontando para copiar o código CSS de um slot.
    8. Abaixo do código que você copiou, coloque uma vírgula e cole o seguinte código CSS:
      1. Altere a propriedade "slotName" para "Coluna 3",.
      2. Altere a propriedade "flex" para "2".
      3. Adicionar "margin-left": "1rem".
      Figura 6. Colar o código CSS
      Colando o código CSS.

      Alterar a propriedade "flex" aumenta o tamanho da coluna. Ao usar "margin-left", você adiciona espaço entre as colunas anteriores.

    9. Recolha a exibição expandida e clique em Aplicar.
      Figura 7. Aplicar uma mudança de layout
      Aplicando uma mudança de layout.

    Resultado

    O novo layout Flexbox que você criou mostra o novo slot que você adicionou ao layout original de duas colunas.
    Figura 8. Novo layout personalizado
    Layout personalizado novo e concluído.
    Clique em Redefinir para original para redefinir as mudanças de layout de volta para o original.
    Figura 9. Redefinir um layout
    Seta apontando para redefinir para a opção original.