O que é Flexbox (e por que você deve usá -lo)

Você pode criar seções limpas o dia todo, mas alinhar elementos em cada tamanho de tela pode começar a parecer mais como tentativa e erro do que o design intencional.

O Flexbox corrige isso. Ele oferece controle real sobre como os elementos se sentam, se alongam, encolhem e envolvem dentro de um recipiente, sem ajuste constante de margens e preenchimento. Neste guia, vamos dividir como o Flexbox funciona, como simplifica os layouts e como usá -lo visualmente dentro do Divi 5 sem escrever uma única linha de código.

O que é Flexbox

O Flexbox, curto para o layout flexível da caixa , é um modelo de layout que simplifica como os elementos se alinham e se espalham dentro de um recipiente. Em vez de posicionar cada item manualmente usando margens ou larguras fixas, o FlexBox permite definir como esses elementos devem se comportar, dependendo do espaço disponível.

Os elementos devem crescer para preencher espaço extra? Encolher quando o espaço está apertado? Eles deveriam encerrar para a próxima linha quando não se encaixam mais? Você faz essas escolhas através de um conjunto de propriedades que aplica ao contêiner e seus filhos. É assim que você decide como seu layout deve responder.

Vamos fazer exemplos práticos para entender isso. Digamos que você tenha três botões dentro de uma linha horizontal. Com o Flexbox, você pode centralizar todos eles uniformemente dentro do recipiente:

Decida que o botão do meio deve ocupar mais espaço do que os outros:

Ou você pode querer que os botões empilhem automaticamente quando a tela se tornar mais estreita:

O FlexBox torna tudo isso possível com propriedades simples, como conteúdo justificado, wrap flex e flexão flexível.

Além disso, permite controlar como os itens são espaçados, alinhados em eixos diferentes e pedidos visualmente, sem alterar sua posição real no construtor. Você pode centralizar o conteúdo, empurrá -lo para a parte superior ou inferior do contêiner, alinhar um item de maneira diferente do restante ou até reverter a ordem inteira nos pontos de interrupção.

Você pode pensar: eu já não posso fazer isso com margens e estofamento?

Você tem razão. Você pode centralizar elementos manualmente ou ajustar seu tamanho com larguras personalizadas. No entanto, esses métodos dependem de posicionar cada item individualmente. Você está ajustando cada elemento um de cada vez, para cada tamanho de tela.

O Flexbox muda esse processo completamente. Em vez de tratar cada elemento separadamente, ele permite definir regras de layout no nível do contêiner uma vez. Você diz ao contêiner como seus filhos devem se comportar em diferentes cenários e isso os ajusta conforme necessário.

Essa abordagem torna os layouts mais consistentes, mais fáceis de gerenciar e mais flexíveis à medida que os designs evoluem, especialmente quando são adicionados tamanhos de tela ou novos módulos.

Como a direção flexível afeta o alinhamento

Uma das primeiras opções que você faz no Flexbox é a direção em que os elementos devem fluir, seja em uma linha ou uma coluna. A propriedade Flex-Direction define isso e define como os itens estão alinhados, embrulhados e espaços dentro do contêiner.

Vamos entender isso melhor porque propriedades comuns como o Content e o Content de Alinhamento dependem inteiramente de qual direção está definida. Eles não funcionam fora do layout padrão do navegador, mas os eixos criados pelo Flexbox: o eixo principal e o eixo cruzado . O eixo principal segue a direção que você define com a direção flexível: horizontal para linhas, vertical para colunas. O eixo cruzado segue para o outro lado: vertical para linhas, horizontal para colunas.

Portanto, o eixo principal corre para a esquerda para a direita quando a direção é definida como linha. Isso significa que o Justify-Content move elementos pela linha e o alinhamento-itens controla como eles se alinham verticalmente nessa linha.

E quando você muda a direção para a coluna, toda a lógica de alinhamento desliza. O eixo principal agora é executado de cima para baixo, o que significa que justificar o conteúdo alinha itens verticalmente, e o alinhamento-itens ajusta sua posição da esquerda para a direita.

Ele pode parecer um pouco confuso no começo, mas depois de ver como os eixos principais e cruzados respondem à direção, ele clica. Você começará a identificar padrões e as decisões de layout parecerão mais intuitivas. Há também uma tabela de referência rápida abaixo se você deseja verificar as coisas enquanto pratica.

Sintaxe e propriedades do Flexbox comuns

Alterne a propriedade de exibição de um contêiner de bloco para flex para ativar o FlexBox. Quando você faz isso, o navegador começa a tratar elementos internos, como linhas, botões, cartões ou ícones como itens flexíveis.

.container {
display: flex;
}

A partir daí, você usa diferentes propriedades do Flexbox para controlar o comportamento. Por exemplo, o Justify-Content decide como os itens são espaçados ao longo do eixo principal (isso é definido como horizontal por padrão, direção flexível: linha) . Use o Flex-Start para alinhar itens à esquerda, Flex-End para empurrá-los para a direita, centralize-os para centralizá-los, ou o espaço entre e o espaço para espalhá-los uniformemente.

Por padrão, o Flexbox tenta se encaixar em todos os itens em uma linha. Se houver muitos, eles encolherão para se encaixar com base em suas configurações de flexão flexível e, se não puderem encolher o suficiente, poderão transbordar o contêiner. Para evitar isso, ligue o Flex-Wrap para que os itens passem para uma nova linha em vez de amontoar um.

Você já pode pensar em muitos casos de uso em que essas duas propriedades podem resolver problemas de layout. Mas há muito mais, e cada um oferece controle específico sobre tamanho, ordem, alinhamento e espaçamento.

Se você está curioso para ver como eles realmente funcionam de uma maneira divertida e prática, experimente o Flexbox Froggy. É um pequeno jogo divertido, onde você aplica o código Flexbox real para mover sapos em torno de um lago. Ao longo do caminho, você para de adivinhar e começa a reconhecer exatamente o que cada propriedade faz.

Por que usar o Flexbox

Até agora, você já viu como o Flexbox muda como os layouts respondem ao espaço. Mas o valor real vem do que essa mudança permite que você faça mais facilmente. O Flexbox transforma desafios de layout teimosos em padrões simples e reutilizáveis.

• Alinhamento simplificado: propriedades como o conteúdo justificado e os itens do alinhamento de itens ou itens espaciais sem depender de ajustes de margem ou classes de auxiliares.
• Responsivo por padrão: os itens crescem naturalmente, encolhem ou envolvem, dependendo do seu espaço. Isso resulta em layouts mais limpos que se adaptam sem pontos de interrupção adicionados.
• Espaçamento e dimensionamento automáticos: você controla como os elementos compartilham espaço com propriedades como crescimento flexível, flexão flexível e base flexível, tornando o fluido de layout em vez de fixo.
• Reordenando sem alterar o HTML: você pode alterar a ordem visual dos elementos sem tocar no HTML. A estrutura permanece limpa, enquanto o layout se ajusta a telas diferentes.
• Menos hacks de layout: você não precisa mais de carros alegóricos, clearfixes ou scripts de correspondência de altura. O Flexbox substitui aqueles por opções modernas e confiáveis.

E como é suportado em todos os principais navegadores, o Flexbox não é apenas eficiente, mas também confiável. Isso o torna uma escolha moderna e mais confiável para projetos do mundo real.

Por que o Flexbox geralmente é melhor que a grade

A grade é outro sistema de layout popular, como o Flexbox. No entanto, ambos são construídos para diferentes casos de uso.

A grade, por exemplo, foi projetada para layouts bidimensionais, onde você precisa de controle sobre linhas e colunas. As exibições de produtos, galerias de imagens e layouts editoriais no estilo de revista são exemplos de grade, pois dependem de uma estrutura fortemente alinhada em ambos os eixos.

Você começa definindo a grade: quantas linhas e colunas existem e quão largo ou alto cada uma. Então você coloca cada item nessa estrutura.

Este é um layout da grade. Os itens estão alinhados nos dois eixos: linhas e colunas, com espaçamento e proporções fixos.

Mas nem todo layout precisa desse nível de planejamento.

Na maioria das vezes, as seções da interface do usuário fluem em uma única direção. Linhas de cartões, blocos de ícone-mais-texto e links de navegação seguem um eixo, não dois. É exatamente aí que o Flexbox se encaixa.

Em um layout do Flexbox, os cartões estão alinhados em uma direção (linha ou coluna) e depois embrulhados e espaçados com base nas regras do contêiner.

Você não precisa mapear todo o layout com antecedência. Você simplesmente diz ao contêiner como os itens devem se comportar ao longo de um único eixo e o Flexbox lida com ele.

Portanto, a menos que você esteja projetando algo que realmente dependa de uma grade rígida, o Flexbox geralmente será a escolha mais rápida, simples e flexível.

Flexbox em Divi 5

Tudo o que aprendemos até agora sobre o Flexbox é ótimo, mas escrever CSS personalizado para cada ajuste de layout não é o que você deseja fazer, especialmente se você construiu seu site usando um construtor visual como o Divi.

É por isso que o Divi 5 agora inclui controles flexíveis embutidos. Você não precisa mais alternar as guias ou adicionar CSS manualmente. Tudo isso, e até comportamentos avançados de layout, agora está incorporado ao construtor visual, menos a codificação e um back -end esmagador.

Inscreva -se no nosso canal do YouTube

Para encurtar a história, não há necessidade de se lembrar da sintaxe ou dos nomes de propriedades, basta selecionar o que você deseja na interface. Clique em qualquer seção, linha ou coluna, vá para a guia Design e, em Layout> Layout Style , certifique -se de usar o Flex.

Isso abre um novo conjunto de controles de layout. Essas são as propriedades do Flexbox Core que você normalmente escreveria no CSS, mas agora como opções clicáveis. Você pode testar as alterações ao vivo e ver como seu conteúdo reage.

Portanto, mesmo que você nunca tenha escrito uma única linha de código Flexbox, não perderá nada. O Divi 5 oferece o mesmo controle de layout visualmente com o mesmo nível de controle, mas muito mais facilidade.

Aprenda tudo sobre o sistema Flexbox da Divi 5

Novas estruturas de linha

Por que divi quando outros construtores da web também o têm? Enquanto muitos construtores da Web oferecem o Flexbox como uma opção de layout, o Divi 5 se aproxima de maneira diferente. Este não é um recurso em camadas sobre um sistema existente; Agora é o núcleo de como o construtor funciona.

Todo o mecanismo de layout foi reconstruído desde o início com o Flexbox em sua base. Como resultado, o comportamento do layout parece mais consistente e previsível porque segue uma lógica de layout intencionalmente projetada.

Por exemplo, quando você adiciona uma nova seção ou linha no Divi 5, você notará imediatamente algo diferente. Novas estruturas. Cada um agora é executado no Flexbox por padrão, o que significa alinhamento, espaçamento e capacidade de resposta são tratados de maneira mais inteligente desde o início.

Você não precisará ativar o Flex para novos elementos de design que você adicionar. E quando você faz, ao editar um layout mais antigo, as ferramentas de alinhamento e espaçamento ficam instantaneamente mais fáceis de gerenciar.

Você também pode alterar como as colunas são organizadas dentro de uma linha usando a estrutura de alteração da coluna.

Isso abre um painel onde você pode selecionar uma nova estrutura de coluna. O layout é atualizado imediatamente, com o Flexbox ajustando automaticamente o espaçamento e o alinhamento.

Tente adicionar alguns tipos de linha diferentes e redimensionar a tela. Você verá como tudo muda e se adapta sem quebrar. Essa é a força da Flexbox assada no construtor, tornando o Divi 5 uma opção mais confiável e moderna.

Como o Flexbox funciona no divi 5

Se você está começando, aqui está um passo rápido para ajudá -lo a se sentir confiante ao usar o Flexbox no Divi 5.

Controles de layout

Quando você alterna uma seção, linha ou coluna para flexionar layout, um novo conjunto de controles de layout aparece nas configurações de design> layout . Eles oferecem controle visual do FlexBox ao lado de suas opções usuais.

• (1) Estilo de layout: é aqui que você ativa o Flex. Uma vez definido, outras opções específicas de flexibilidade, como direção, alinhamento e espaçamento, se tornam visíveis.
• (2) Gap horizontal: adiciona espaço entre os itens da esquerda para a direita.
• (3) Gap vertical: define o espaço entre os elementos empilhados ao usar layouts da coluna.
• (4) Direção do layout: altera as direções de fluxo, linha, coluna ou revertido, para que os itens possam se alinhar lado a lado ou de cima para baixo.
• (5) Justifique o conteúdo: alinhe os itens ao longo do eixo principal. Você pode centralizá -los, empurrá -los para um lado ou espalhá -los.
• (6) Alinhar itens: alinhe os itens ao longo do eixo cruzado, o que é útil ao organizar itens verticalmente dentro de uma linha horizontal.
• (7) Pranco de layout: Isso permite que os itens se movam para a próxima linha quando o espaço acabar. É útil ao criar layouts que respondem ao tamanho da tela em vez de quebrar.

Digamos que você tenha uma barra de marca com logotipos e queira que eles sejam maiores. Com a direção flexível definida para o embrulho de linha e layout ligada, eles fluem automaticamente em duas linhas quando não houver espaço.

Alinhar elementos em duas linhas agora é fácil sem consultas de mídia ou uma solução alternativa manual.

Controles de coluna e dimensionamento

Uma vez dentro de uma linha habilitada para flex, cada coluna possui uma nova configuração em Design> Dimensionamento chamado Classe Column . Isso determina quanto espaço uma coluna ocupa com base em seu conteúdo e ambiente.

Você pode escolher entre encolher para caber (o que torna a coluna apenas tão ampla quanto seu conteúdo) ou crescer para encher (o que estica a coluna para ocupar espaço extra).

Por exemplo, se você deseja que uma coluna de texto se sinta mais proeminente e tenha elementos de cartão que abraçam seu conteúdo, você definiria os cartões para encolher para se encaixar e o texto para crescer para preencher.

Controles de pedidos

Outra ferramenta poderosa, mas muitas vezes esquecida, é a configuração de pedidos na guia Conteúdo . Isso permite que você reordenasse visualmente as colunas e módulos sem alterar a estrutura do layout na exibição de quadro de arame ou camadas.

Digamos que você queira que um módulo específico apareça primeiro no celular, mas em segundo lugar na área de trabalho. Você pode atribuir diferentes valores de ordem em cada ponto de interrupção.

Casos de uso prático de flexão flexível

Vejamos mais alguns casos de uso do Flexbox que agora são simplificados com o Divi 5.

1. Alinhe verticalmente com flexão

Por um longo tempo, o alinhamento vertical foi um dos problemas de layout mais irritantes do Web Design. Você tentaria truques de preenchimento, posicionamento absoluto, margens manuais e outros enfeites apenas para acabar com algo que parecia bem nos desktops, mas estava quebrado em telas menores.

Com o Divi 5, essa dor de cabeça se foi. Agora, se você deseja centralizar o conteúdo verticalmente dentro de uma seção, basta definir os itens alinhados para o centro.

É isso. O layout se ajusta automaticamente nos pontos de interrupção e seu conteúdo sempre permanece no ponto ideal. O que costumava levar a ginástica CSS agora é apenas alguns cliques dentro do construtor.

2. Equife as alturas de cartão automaticamente

Você provavelmente já encontrou esse problema antes. Você cria uma fileira de cartões, como uma seção de sinopse, e tudo parece bem até que um item tenha mais texto que os outros. De repente, seu layout parece irregular. Algumas colunas se estendem mais altas, outras ficam curtas e o design perde o equilíbrio.

Essa limpeza manual não é mais necessária. Quando você muda uma linha ou seção para flexionar, o Divi aplica configurações padrão que tratam cada coluna como um item flexível. Isso os faz se esticar automaticamente para corresponder à altura um do outro dentro da mesma linha, independentemente do conteúdo interno.

Também permanece responsivo. Em telas menores, as colunas envolvem novas linhas sem precisar de ajustes extras, e o comportamento de altura igual continua a se aplicar.

3. Botões de envoltório automaticamente nos pontos de interrupção

Manter uma fileira de botões arrumados e legíveis em diferentes tamanhos de tela pode ser uma dor. Você geralmente acaba adicionando novas linhas ou ajustando manualmente o layout para cada ponto de interrupção. Mas com o Divi 5, isso não é mais necessário.

Ligue o layout flexível e permita que o layout embrulhe na visualização do laptop . É isso. Os botões envolverão automaticamente várias linhas em telas menores sem quebrar o layout.

Os botões mantêm seu espaçamento e alinhamento em telas maiores e empilham naturalmente em tablets e telefones. Você pode até ajustar o alinhamento deles usando o conteúdo justificado e controlar o espaçamento entre eles usando o GAP, para que tudo pareça limpo e intencional em todos os tamanhos.

Divi + Flexbox apenas faz sentido

Você viu como o FlexBox funciona, como o Divi 5 o torna visual e como as dores de cabeça comuns agora levam segundos em vez de horas. O Divi 5 não suporta apenas o Flexbox - ele é construído em torno dele. Cada seção, linha e coluna estão prontas para se comportar como seria de esperar sem CSS personalizados.

O Flexbox não é apenas uma opção se você estiver projetando com o Divi 5. É o padrão mais inteligente. Layouts mais limpos, menos soluções alternativas e controle responsivo assado diretamente no construtor. Essa é a mudança, e isso é algo que o prepara para o futuro do web design.