Usando layouts Flexbox em Construtor de IU

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 5 min. de leitura

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

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

    O flexbox é um sistema de layout unidimensional em CSS. O flexbox é inerentemente flexível, o que é útil para quando você não sabe o tamanho do seu conteúdo. Se você planeja criar páginas complexas, pode personalizar o layout da sua página na guia Estilos do painel de configuração ou com CSS. Visita 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.
    • Row-reverse: As linhas são organizadas na direção inversa 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
    • Coluna-reverse: 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:
      • Flex-start: Os itens estão no início da direção flexível, semelhante ao conteúdo justificado à esquerda. Esta é a configuração padrão.
      • Flex-end: 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 espaço igual ao redor deles.
      • Uniformemente: O espaçamento entre os itens é igual .
    • 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:
      • Stretch: Estique seu conteúdo para preencher o contêiner. Esta é a configuração padrão
      • Flex-start: Coloque seu conteúdo no início do eixo cruzado.
      • Flex-end: Coloque seu conteúdo no final do eixo cruzado.
      • Centralizar: Centralize seu conteúdo no eixo cruzado.
      • Sistema de base: Alinhe seu conteúdo da mesma forma que sua linha de base alinhamento .
    • Altura: Defina a altura automática ou manualmente.
    • Largura: Defina a altura do seu flexbox itens 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.

    Crie um layout Flexbox com o novo sistema de layout

    Crie um layout Flexbox em Construtor de IUpara 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 IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página em Construtor de IU.
    4. Selecione - Adicionar conteúdo no Construtor de IUfase.
    5. Selecione Flexbox na guia layouts.
      Seta apontando para a opção Flexbox na guia layouts da caixa de ferramentas.
    6. Selecione Adicionar.
    7. Selecione Estilos no painel de configuração.
    8. Em Layout , você deve ver Flexbox realçado.
      Seta apontando para a opção Flexbox na guia Estilos do painel de configuração.
    9. Em Layout da guia estilos, você pode mudar o seguinte:
      Direção
      Defina como você deseja que os componentes empilhem, horizontal ou verticalmente.
      Alinhar itens
      Defina como os componentes nos contêineres se alinham como um grupo.
      Justificar conteúdo
      Defina como compactar ou espaçar os componentes no contêiner.
      Nota:
      Selecione Mostrar opções de layout avançadas para ver as próximas duas opções.
      Lacuna
      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 se transbordam em várias linhas.

      Visita Mozilla Para saber mais sobre as configurações de layout do Flexbox.

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

    Crie um layout Flexbox com o sistema de layout antigo

    Crie um layout Flexbox em Construtor de IUPara 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ê aprenderá como usar o Flexbox para mudar o código CSS para personalizar o layout da sua 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 IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página em Construtor de IU ou abra uma página.
    4. Clique em Layout e escolha o layout de duas colunas.
      Figura 2. Layout de duas colunas padrão
      Layout de duas colunas padrão.
    5. Clique em Edite o código de layout .
      Figura 3. Edite 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. Expanda o editor de código
      Seta que aponta 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. Copie o código CSS de um slot
      Seta que aponta 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. Mude o. "slotName"propriedade para "Coluna 3", .
      2. Mude o. "flex"propriedade para "2" .
      3. Adicionar "margin-left": "1rem" .
      Figura 6. Cole o código CSS
      Colando o código CSS.

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

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

    Resultado

    O novo layout do 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 finalizado.
    Clique em Redefinir como original para redefinir as mudanças de layout de volta para o original.
    Figura 9. Redefina um layout
    Seta que aponta para redefinir para a opção original.