5 armadilhas a serem evitadas ao mudar para o sistema de layout do Flexbox da Divi 5

O Divi 5 acabou de enviar seu sistema de layout baseado em flexão flexível. Ele substitui o antigo mecanismo de layout de blocos do Divi 4 e desbloqueia novos controles poderosos no Visual Builder. Cada nova linha agora indica o layout flexível. A menos que você já tenha usado o CSS Flexbox, essa alteração exige uma nova mentalidade de design porque o Flex funciona de maneira diferente. Se você não ajustar seus hábitos, ficará preso.

Esta atualização fornece controles visuais para embalagem, direção, espaçamento, pedidos e alinhamento - todos incorporados. Sem CSS personalizado hacky. Ele também vem com atalhos de linha pré-configurados para criar estruturas de linha complexas com ajustes mínimos de configurações de exibição. Alguns recursos baseados em blocos, como seções especializadas e de largura completa, são descontinuadas porque o Flex agora cobre todos esses casos de uso.

Esta postagem entra nas cinco maiores armadilhas que você acertará ao trocar seu modelo mental de bloco para flexão no Divi 5.

Armadilha #1: Forçando o Flex a uma mentalidade de bloco

→ O Flex requer um novo modelo mental, não apenas novos controles.

Ninguém gosta de mudar, a menos que saiba que está atingindo limitações muito reais. Para muitos, o antigo sistema de layout é o que eles sabiam e se sentiram confortáveis. Mas tinha suas limitações. Aqueles que sabiam o suficiente sobre o CSS sabiam que o sistema antigo estava faltando coisas que o Flexbox foi projetado para remediar. Evitar a primeira armadilha exige entender que o Flexbox não é apenas um layout de bloco com opções extras .

No Divi 4, os módulos empilhados verticalmente por padrão - todos os elementos estavam abaixo daquele antes dele. Você pode empilhar as coisas horizontalmente com colunas, mas nesse ponto você trabalharia com várias colunas de linhas + dentro de uma seção para construir um layout. Isso foi previsível e confortável para muitos, mas também levou à realidade frustrante de não ser capaz de ter dois botões lado a lado e outros desafios de design.

O Divi 5 funciona de maneira diferente agora porque novos contêineres (ou seja, seções, linhas, colunas e grupos) estão definidos como "flexionam" por padrão. Você obtém opções mais específicas no nível do contêiner para organizar elementos filhos. O Flexbox é poderoso porque permite layouts flexíveis, onde os elementos são posicionados com base no espaço disponível e no conteúdo dentro deles. Mais sobre isso na próxima armadilha . Isso permite que os layouts se adaptem a tamanhos e conteúdos de tela variados sem depender do posicionamento fixo ou absoluto. Aqui está um exemplo para comparar o Flex com o bloco.

O bloqueio de bloqueio empilha os modulos verticalmente ao longo do eixo do bloco. O Flexbox permite escolher entre linha e coluna como o eixo principal.

Cada configuração e opção na interface do usuário correspondem diretamente às propriedades CSS reais adicionadas a cada contêiner.

Armadilha #2: sem saber como a flexão flexível e cresce em tamanho de elementos filhos

→ Sem encolher e crescer, seus layouts não se comportarão conforme o esperado.

Com o Flex no Divi 5, os módulos infantis podem ter uma largura ou altura definida. Além disso, eles podem encolher ou preencher (sua largura ou altura), dependendo da sala dentro do recipiente. Neste exemplo, os módulos de texto são definidos como 45% de largura, o que significa que dois módulos se encaixariam horizontalmente como se na mesma linha. Mas se adicionarmos um número ímpar de módulos de texto, não queremos que haja espaço vazio. Podemos definir esses módulos para que o Flex cresça e, quando houver espaço disponível em uma linha, esses módulos crescerão para preencher.

O Divi expõe controles como "crescer para encher", "encolher para ajustar" e configurações personalizadas sobre elementos filhos em qualquer recipiente flex (elemento filho> design> dimensionamento> crescer para encher, encolher para caber ou personalizar ).

A altura e a largura dos elementos filhos parecem familiares se você estiver acostumado para bloquear os layouts. Mas, com as configurações do Flexbox, Grow and Shrink permitem combinar o dimensionamento fixo com o comportamento responsivo - adaptando -se ao espaço disponível em cada contêiner. Isso acrescenta complexidade, mas também desbloqueia muito mais flexibilidade.

Encolher para se encaixar e crescer para encher (além do Flex-Basis) também é muito útil para ajudá-lo a criar layouts responsivos. Para que os layouts de blocos respondam com frequência, você precisaria configurar vários pontos de interrupção e larguras/alturas em cada um desses pontos de interrupção. O Flexbox pode se beneficiar de configurações exclusivas em vários pontos de interrupção, mas, como o nome sugere, é muito flexível . Este é especialmente o caso ao usar o Clamp () para tipografia. Usar os dois juntos, juntamente com outras unidades CSS relativas, quebrará sua necessidade constante de pontos de interrupção.

Vejamos outro exemplo construído com o Flexbox.

O contêiner de coluna (pai) está definido para flexionar com estas configurações:

• Gap horizontal e vertical : 30px (isso poderia usar calc ou grampo para ser um pouco melhor, até mesmo)
• Direção do layout : Linha reversa (explicação para esta decisão na armadilha nº 4)
• Justificar o conteúdo : centro
• Alinhar itens : centro
• Flex Wrap : Wrap Reverse (Explicação para esta decisão na armadilha nº 4)

Em seguida, coloquei três elementos filhos dentro da coluna. Um módulo de título, módulo de divisor e um módulo de texto. Aqui estão as configurações relevantes para cada uma:

• Módulo de título
  • Tamanho do texto : Clamp (2REM, 1.5Rem + 2VW, 3REM)
  • Largura : Auto
  • Tamanho flexível : encolher para caber
• Módulo de divisor
  • Largura : Auto
  • Tamanho flexível : encolher para caber e crescer para preencher
• Módulo de texto
  • Tamanho do texto : CLAMP (0,9375REM, 0,75REM + 0,4VW, 1REM)
  • Largura : Auto
  • Tamanho flexível : encolher para caber

Com uma direção flexível, os elementos filhos se alinham horizontalmente sempre que houver espaço. O módulo de texto é o mais largo, por isso preenche sua própria linha. O módulo divisor cresce ou diminui, pois possui largura automática e crescimento flexível e flexível flexível. O módulo de cabeçalho usa apenas sua largura intrínseca e permanece compacta. Essa configuração produz um layout totalmente responsivo sem pontos de interrupção.

Armadilha #3: não quebrando o hábito da margem

→ Use a lacuna - é mais inteligente, mais limpo e criado para o Flex.

No Divi 4, lacunas visuais entre módulos e outros elementos exigiam margens (lacunas verticais através da margem inferior, lacunas horizontais através da margem esquerda/direita). Quando a lacuna foi aplicada ao espaçamento da coluna, o Divi 4 tinha uma configuração de calha, mas não levou valores de CSS padrão e, na verdade, usou a margem nas laterais das colunas para criar a lacuna. É da mesma maneira que os layouts de bloqueio ainda funcionam. Mas agora há uma abordagem mais limpa e eficaz.

O sistema Flexbox da Divi 5 apresenta controles de lacunas em linha e vertical em Projeto> Layout > Gap horizontal e vertical . Eles mapeiam o GAP CSS e o retorno da linha. As lacunas verticais se aplicam automaticamente a cada "linha flexível" quando os itens envolvem uma nova linha. O mesmo vale para lacunas horizontais: sempre que houver elementos infantis um ao lado do outro, a lacuna estará presente. Essas configurações de lacunas também aceitam qualquer unidade CSS positiva, para que você possa usar o Clamp () ou Calc () para criar espaçamentos de lacunas responsivas.

Isso reduz a necessidade de aplicar valores de margem a cada elemento infantil. A configuração de lacunas se adapta automaticamente com base na direção flexível e no número de crianças no contêiner para aplicar quaisquer lacunas automaticamente. As margens ainda têm seu lugar, mas a necessidade de espaçar elementos dentro de um recipiente é reduzida.

Armadilha #4: Underusing Flow e controles de ordem reversa

→ Ordem visual e ordem semântica não precisam corresponder.

Por padrão, os elementos filhos em um contêiner flexão serão exibidos em sua ordem de origem. Flexbox e Divi 5 oferecem a capacidade de especificar direções de flexão reversa e controles de pedidos para alterar o fluxo visual de elementos sem alterar a ordem HTML dos elementos.

A direção reversa alternar na direção do layout permite reverter a ordem dos elementos na direção da linha ou da coluna. Para olhar o exemplo do layout da armadilha nº 2 novamente, podemos ver por que queremos isso. Você pode ver nas camadas ver que a ordem dos elementos filhos é o título, depois o divisor e, finalmente, o módulo de texto. Semanticamente, ter o cabeçalho (um H2 neste caso) na parte superior da pilha faz sentido para os leitores de tela. No entanto, o cabeçalho é óbvio o suficiente visualmente, seja primeiro ou o último, pois estamos usando uma hierarquia visual com o tamanho do texto.

Usar a linha reversa como direção flexível e embrulho reverso mantém a ordem HTML (importante para a acessibilidade), além de me permitir projetar as coisas como as visualizamos.

Você pode obter o mesmo usando o pedido de elementos filho, que é encontrado no Divi ao clicar nas configurações de um elemento filho> Guia de conteúdo> Pedido . Podemos alterar a ordem em que somente esse elemento aparecerá. Neste exemplo, alcançamos o mesmo resultado final, mas com uma configuração diferente - uma que pode fazer mais sentido para alguns.

Armadilha #5: esquecendo de definir o envoltório

→ O Flex não vai quebrar para novas linhas, a menos que você diga.

Mencionamos que a embrulho mais cedo, mas merece sua própria seção. Novos contêineres Flex Padrão para nenhum invólucro. Isso pode ter consequências inesperadas. Por exemplo, se você adicionar quatro módulos filhos, cada um com 50% de largura, esperaria que eles aparecessem em duas linhas flexíveis. Seu problema é simplesmente que você deve permitir que seu contêiner envolva.

O Divi inclui uma alternância chamada Layout embrulhando, que possui três estados: sem gravação, embrulho e embrulho-reverso. Você deve ativar o envoltório se quiser que os módulos sejam divididos em novas linhas em um limite. É assim que o Divi suporta estruturas de várias fileiras dentro de um único recipiente (linhas aninhadas ou múltiplas não são a única maneira de fazer isso agora).

Reserve um tempo para dominar o Flexbox

O Flex no Divi 5 é mais poderoso que o sistema de layout apenas apenas em bloco da Divi. No entanto, requer algum aprendizado para entender. O Flexbox não é uma configuração específica do Divi, por isso é importante que você saiba o básico de como essa ferramenta CSS funciona. O Divi facilita a implementação, pois todas as configurações que você pode aplicar no CSS estão disponíveis diretamente no editor. Mas o conceito é muito diferente do bloco.

Devido a essas diferenças, é altamente recomendável que você passe uma hora usando uma ferramenta de ensino interativa para entender o FlexBox. Um que é fácil de usar e realmente faz o truque é o flexboxfroggy.com. Isso leva você a 24 desafios progressivamente complexos, ensinando -lhe todo o básico. É muito melhor do que o uso do uso por uma hora.

Use Flex com Divi 5 hoje

O Flexbox no Divi 5 é honesto. Não adivinha o que você quer. Ele pede que você decida. Mas depois de decidir, a flexibilidade segue. Você pode construir todas as estruturas de layout de forma responsável, responsável e confiável - mesmo infinitamente aninhadas - sem CSS ou hacks personalizados.