Solução de problemas com o Flex (1.0)

Limitações

Confira, a seguir, importantes informações para as seções Flex e Modo Flex:

• No editor, não é possível arrastar objetos de uma grade a outra
  
Nota

Para transferir um objeto de uma grade a outra, use o painel "Camadas".

• Não é possível vincular flexboxes a uma coleção
• Não é possível adicionar seções flexíveis ao cabeçalho

Solução de problemas frequentes

Quando troco os pontos de interrupção para tablet/celular, o texto se sobrepõe aos objetos

Isso pode ocorrer quando os itens são colocados diretamente na grade ou quando o layout do recipiente é 1x1.

Na navegação superior, clique no ponto de interrupção Desktop.

• Se os objetos sobrepostos estiverem num recipiente: acesse o painel Design; em Layout personalizado, selecione mais linhas na lista suspensa e coloque cada objeto em uma linha.
• Se os itens estiverem diretamente na grade: adicione um recipiente com linhas e arraste os objetos para ele, conforme especificado acima. Você também pode colocar objetos num flexbox vertical.

Não consigo arrastar para ajustar o tamanho da grade no celular

A altura da grade já vem no valor mínimo; ou seja, ela não ficará menor do que o especificado. Por exemplo: se a altura mínima da grade for especificada em 400 px com um recipiente com altura mínima de 1.200 px, a grade deverá ter no mínimo 1.200 px.

Para ajustar o tamanho do conteúdo:

No painel Design, em Tamanho, mude a altura mínima. Você também pode ajustar o tamanho do conteúdo inline e depois o tamanho da grade inline; ou usar o painel Design.

A linha ficou grande demais no celular

No celular, o Flex transforma as colunas da grade em linhas. Se a altura mínima do objeto (como um recipiente) for maior do que a da grade no ponto de interrupção principal, talvez a linha não apareça direito no celular.

Como o tamanho da grade é ajustado com base no conteúdo, é normal uma imagem ou recipiente estar especificado em pixels.

Para ajustar o tamanho do conteúdo:

Comece no ponto de interrupção principal; no painel Design, em Tamanho, mude a altura mínima. Você também pode ajustar o tamanho do conteúdo inline e depois o tamanho da grade inline; ou usar o painel Design.

O design parece confuso quando mudo de pontos de interrupção

Isso pode acontecer pelos seguintes motivos:

• Os objetos não foram ajustados nas linhas da grade. Isso é comum em células pequenas.
• Os objetos na grade não estão alinhados.
• A fixação está num estado padrão. Como padrão, ao se adicionar um objeto, ele é fixado no canto superior esquerdo. Quando você o alinha, a fixação muda. O alinhamento inferior, por exemplo, fixará na parte inferior. Note que, ao arrastar o objeto após fixá-lo, ele volta para o estado padrão.

Para ajustar um objeto à linha da grade, arraste-o e use as linhas de ajuste (rosa) para colocar o objeto na grade. Você também pode usar os controladores de alinhamento no painel Design.

Para ajustar manualmente a fixação, selecione um objeto e acesse Posição, no painel Design. Ao lado de Fixar, clique na seta correspondente ao local onde o objeto será fixado.

Não consigo alterar o tamanho da fonte no tablet

O tamanho da fonte é o mesmo no desktop (ponto de interrupção principal e desktop largo) e no tablet. Recomendamos um tamanho compatível tanto para desktop quanto para tablet.

Tento reorganizar os elementos especificamente no celular, mas isso afeta todos os pontos de interrupção

Qualquer alteração na estrutura afeta todos os pontos de interrupção. Por exemplo: no ponto de interrupção principal há dois recipientes adjacentes abrangendo toda a grade, mas você quer esses elementos empilhados na vertical no celular. Porém, ao tentar alterar o local, eles ficam aninhados. Ao aninhar um elemento no celular, isso afeta todos os pontos de interrupção, aninhando os elementos em todos os pontos. Como não há espaço para empilhar esses elementos na vertical, eles ficam aninhados.

Para corrigir isso, mude a altura mínima no espaço em que você está trabalhando. Para isso, selecione a Grade; depois, no painel Design, em Tamanho, aumente a Altura mínima. Com isso, você tem mais espaço para mover os elementos. Após reorganizá-los, você pode mudar para a altura desejada.