As seções flex criam um layout e alinham automaticamente os objetos, para você criar belas seções com facilidade e rapidez. No entanto, para um design mais complexo, com objetos sobrepostos ou composição com estilo livre, você precisa de uma grade avançada, que coloca os elementos numa composição de estilo livre sem layout automático. Por isso, recomendamos checar seu projeto em todos os pontos de interrupção.
Este artigo é voltado para usuários que começaram a usar o DudaFlex após 18 de julho de 2022. Para a versão 1.0 do DudaFlex, confira Recipiente e flexbox (1.0).
Para aprender a criar elementos sobrepostos, confira o vídeo a seguir ou siga as instruções abaixo.
Para criar elementos sobrepostos:
- Clique para selecionar uma coluna flex.
- No menu flutuante ou na coluna flex, clique no ícone de mais (
).
- Na seção de elementos flex, selecione Grade avançada (antigo contêiner). Nota
Seguindo as práticas recomendadas, arraste as bordas da grade avançada para que ela abranja toda a largura da coluna flex.
- Na seção "Layout" do painel de design, selecione uma grade pré-criada em Reorganizar layout. Para criar uma grade, use os menus suspensos Colunas e Linhas em Personalizar layout para adicionar colunas e ou linhas.
- No menu flutuante, clique no ícone de mais, selecione os widgets desejados e organize-os na grade avançada.
- Clique para selecionar um elemento e, na seção "Organizar" do painel de design, selecione Trazer para a frente, Adiantar uma posição, Recuar uma posição ou Enviar para trás.
Ao usar as grades avançadas, recomendamos conferir o design em cada ponto de interrupção. Com elementos sobrepostos, talvez você precise ajustar o design em determinados pontos de interrupção.