Visão geral do Layout do Flex

Última atualização em 7 de ago de 2026

Use o painel Layout do Flex no InDesign para criar, alinhar, definir direção, quebrar, justificar e espaçar itens no Layout do Flex.

O que é um Layout do Flex?

Layout do Flex é um recurso que permite criar contêineres que se adaptam automaticamente conforme o conteúdo é alterado. Os itens no contêiner são posicionados usando direção, espaçamento, preenchimento e alinhamento. Quando o conteúdo é adicionado, removido ou redimensionado, o layout se ajusta automaticamente, eliminando a necessidade de ajustes manuais.

Acessar opções do Layout do Flex

Selecione um objeto/grupo/múltiplos objetos em seu documento e faça um dos seguintes para acessar as opções do Layout do Flex:

  • Acesse Objeto > Layout do Flex.
  • Clique com o botão direito no objeto para acessar o Layout Flex.
  • Acesse o painel Janela > Layout Flex.
  • Selecione uma vez para trabalhar com o flex principal e clique duas vezes para selecionar o secundário.
  • Use a ferramenta Seleção direta  para selecionar os itens secundários.

Adicionar ao Layout do Flex

Adiciona objetos selecionados a um Layout do Flex.

Converter para Layout do Flex

Converte um objeto (moldura retangular, forma retangular ou grupo) em um Layout do Flex.

Remover Layout do Flex

Remove o Layout do Flex da seleção. Se o Layout do Flex tiver vários objetos, um grupo será criado. Se tiver um objeto, o objeto permanece.

Mostrar controles do Flex

Abre o painel Layout do Flex (como alternativa ao painel Propriedades).

O Layout do Flex introduz no InDesign um conceito de contêiner semelhante ao CSS Flexbox. Ele oferece controle avançado de layout para objetos secundários. Com o Layout do Flex, os designs se tornam estruturados, mais adaptáveis e exigem menos ajustes manuais.

Contêiner de Layout do Flex

Você pode configurar as propriedades do Layout do Flex diretamente em Estilos de objeto. Você pode criar um Estilo de objeto chamado Contêiner vertical que inclui configurações de Layout do Flex e aplicá-lo a qualquer contêiner de Layout do Flex no layout.

Exemplo:

Use o painel Estilos de objeto para aplicar Layout do Flex e definir propriedades como direção, alinhamento e espaçamento. Uma vez salvo, aplique esse estilo a outros contêineres para criar um comportamento de layout consistente.

Layout do Flex secundário

A mesma seção Layout do Flex em Estilos de objeto também pode definir propriedades para elementos filhos do Layout do Flex e seus elementos filhos aninhados, permitindo padronizar o comportamento, como dimensões fixas ou flexíveis, em todo o layout.

  • Criação direta de elementos interativos: converta elementos filhos dentro de um Layout do Flex em elementos interativos sem precisar criá-los separadamente e adicioná-los ao Layout do Flex.
  • Bloquear elementos filhos: bloqueie um ou mais elementos filhos dentro de um Layout do Flex para impedir que sejam arrastados, redimensionados ou movidos diretamente para fora do quadro, mas permitindo alterações de posição usando as setas do teclado.
  • Navegação por teclado para elementos filhos: reposicione elementos bloqueados ou desbloqueados usando as teclas de seta esquerda ou direita em layouts horizontais ou as teclas de seta para cima ou para baixo em layouts verticais.
Dica

Você pode usar Estilos de objeto para definir propriedades flexíveis dentro de quadros flexíveis bloqueados.

Painel Layout do Flex

Para acessar o painel, vá para Janela > Layout do Flex. O painel Layout do Flex é aberto. Agora você pode criar ou adicionar um Layout do Flex ou personalizar um existente de acordo com suas necessidades. Se não houver nenhuma seleção, você pode usar o painel para alterar as configurações padrão (aplicável se a detecção automática estiver desativada). Navegue até Preferências > Geral > Detectar automaticamente e aplicar configurações de Layout do Flex para verificar a configuração de detecção automática.

Painel de Layout do Flex mostrando várias opções para criar um layout do Flex

A. Largura do recipiente Flex B. Altura do recipiente Flex C. Envolver D. Direção dos objetos no Layout do Flex E. Espaçamento vertical F. Espaçamento Horizontal G. Preenchimento  H. Justificação I. Alinhamento dos objetos no Layout do Flex 

Largura e Altura

O tamanho de contêineres de Layout do Flex e de seus filhos pode ser controlado independentemente. Para um contêiner de Layout do Flex, a largura e a altura podem ser:

  • Fixo: o tamanho do contêiner permanece constante, independentemente do seu conteúdo.
  • Automático: o tamanho do contêiner aumenta ou diminui de acordo com o tamanho dos filhos.

Para um filho de Layout do Flex (incluindo Layout do Flex aninhado):

  • Fixo: o tamanho do filho permanece constante, independentemente de seu próprio conteúdo.
  • Automático: o tamanho do filho se adapta para caber o próprio conteúdo ou outros filhos.
  • Preencher espaço: o filho se expande para ocupar o espaço restante disponível nessa dimensão, compartilhando espaço com outros irmãos Preencher espaço, conforme necessário.

Envolver

Ativa ou desativa o contorno de objetos no contêiner.

Direção

Escolha como os itens fluem dentro do contêiner (linha, linha reversa, coluna, coluna reversa).

Espaçamento

Controla o preenchimento e o espaçamento.

  • Preenchimento: define o espaçamento interno do contêiner em todos os lados (superior, inferior, esquerdo, direito).
  • Espaçamento horizontal : define espaçamento consistente entre itens na horizontal.
  • Espaçamento vertical : define espaçamento consistente entre itens na vertical.

Justificação

Controla a distribuição dos itens ao longo do eixo principal.

Alinha a linha ao início do Layout do Flex e alinha os itens ao início da linha.

Alinha a linha ao centro do Layout do Flex e alinha os itens ao centro da linha.

Alinha a linha ao final do Layout do Flex e alinha os itens ao final da linha.

Alinha os itens em linhas de modo que –

  • Espaço igual em ambos os lados de cada item.
  • Os itens nas bordas têm apenas um lado exposto, e o espaço entre eles é a metade do espaço entre os itens.

Alinha os itens em linhas de modo que –

  • O primeiro item está alinhado com a borda inicial, e o último, com a final.
  • Os itens restantes são espaçados uniformemente apenas entre si.
  • Distribui os itens uniformemente ao longo do eixo principal, com o primeiro item no início e o último item no final.
  • Sem espaço nas bordas externas.

Alinha os itens em linhas de modo que –

  • Espaço igual em todos os lugares: entre itens e nas bordas.
  • Tudo está verdadeiramente uniforme.

Alinhamento

Alinha itens no eixo transversal: Superior, Centro, Inferior ou Esquerda, Centro, Direita.

Superior esquerdo: alinha as linhas ao canto superior esquerdo do contêiner Layout do Flex e alinha os itens na linha ao canto superior esquerdo.

Centro esquerdo: alinha as linhas ao centro esquerdo do contêiner Layout do Flex e alinha os itens na linha ao centro esquerdo.

Canto inferior esquerdo: alinha as linhas ao canto inferior esquerdo do contêiner Layout do Flex e alinha os itens na linha ao canto inferior esquerdo.

Centro superior: alinha as linhas ao centro superior do contêiner Layout do Flex e alinha os itens na linha ao centro superior.

Centro: alinha as linhas ao centro do contêiner Layout do Flex e alinha os itens na linha ao centro.

Centro inferior: alinha as linhas ao centro inferior do contêiner Layout do Flex e alinha os itens na linha ao centro inferior.

Superior direito: alinha as linhas ao canto superior direito do contêiner Layout do Flex e alinha os itens na linha ao canto superior direito.

Centro direito: alinha as linhas ao centro direito do contêiner Layout do Flex e alinha os itens na linha ao centro direito.

Canto inferior direito: alinha as linhas ao canto inferior direito do contêiner Layout do Flex e alinha os itens na linha ao canto inferior direito.

Indicadores de seleção em layouts do Flex

O InDesign usa dicas visuais para ajudar você a entender os estados de seleção em layouts do Flex:

  • Contornos pontilhados indicam níveis de layout não ativos.
  • Contornos sólidos indicam quadros irmãos selecionáveis.
  • A ferramenta Seleção direta permite selecionar quadros aninhados diretamente sem cliques repetidos.

Esses indicadores ajudam a esclarecer a hierarquia e o foco de seleção ao trabalhar com layouts aninhados.

Controles de preenchimento e espaçamento na tela

Os layouts do Flex fornecem controles interativos na tela para ajustar preenchimento e espaçamento:

  • Preenchimento vinculado: Ajuste todos os quatro valores de preenchimento juntos.
  • Preenchimento não vinculado: Ajuste cada lado independentemente.
  • Espaçamento horizontal e vertical: Modifique o espaçamento diretamente entre itens, incluindo linhas ou colunas quebradas.

Os indicadores visuais na tela refletem os valores atuais e são atualizados em tempo real no painel Layout do Flex.

Transformar e distorcer quadros do Layout do Flex

Agora é possível girar, espelhar, dimensionar ou inclinar um Layout do Flex sem interromper seu comportamento. As transformações se aplicam tanto a quadros principais do Flex quanto ao quadro do Flex aninhado, e o painel Layout do Flex permanece ativo enquanto você transforma objetos. Isso permite ajustar alinhamento, espaçamento, quebra de linha e direção ao transformar layouts, sem quebrar a estrutura do Flex.