Um guia para iniciantes para o Flexbox CSS Properties

O bom layout começa com um modelo claro para alinhamento e espaçamento. O Flexbox fornece esse modelo organizando o conteúdo ao longo de um único eixo com controle previsível sobre direção, alinhamento, embalagem e lacuna.

Esta postagem abrange o básico dessas propriedades do CSS e como elas trabalham juntas. Após os fundamentos, mostramos como a mesma abordagem é implementada visualmente no Divi 5 usando o sistema de layout do Flexbox. Vamos lá!

O que é o CSS FlexBox?

O desktop de superfície de tráfego móvel mudou o design da web. Os desenvolvedores precisavam de layouts que funcionassem em telefones, tablets e desktops. Métodos antigos geralmente falham.

Flexbox consertou isso. O CSS Flexbox faz com que os elementos se adaptem. Adicione a exibição: flexione a um recipiente e suas crianças diretas se tornam flexíveis. Eles podem crescer, encolher ou permanecer fixo com base no espaço.

O Flexbox coloca itens em uma linha reta, linhas da esquerda para a direita ou das colunas de cima para baixo. Você escolhe a direção.

O contêiner controla o layout. Você define como os itens estão alinhados e o espaço, como espalhar uniformemente, centralizado ou empilhado. A propriedade GAP adiciona espaço consistente entre os itens sem margens extras ou preenchimento. Técnicas mais antigas exigiam matemática com margem complicada e quebraram frequentemente.

O método tradicional faz escolhas de espaçamento aleatório: 10px aqui, 20px lá, 40px em outro lugar. Esses valores dispersos causam inconsistências e dificultam saber qual espaçamento se aplica. Propriedades do GAP Remova adivinhação usando uma regra consistente para todos os elementos.

Um guia rápido para o Flexbox e suas propriedades

O Flexbox se divide em dois campos: propriedades para recipientes e propriedades para itens. As propriedades do contêiner afetam todo o grupo, enquanto as propriedades do item permitem ajustar elementos individuais. A maioria dos layouts precisa de apenas algumas dessas propriedades, como:

Exibição: flex

Transforme qualquer elemento em um contêiner Flex adicionando exibição: flex. Suas crianças diretas se tornam itens flexíveis. Os itens se alinham em uma linha por padrão, em vez de empilhar como elementos de bloco padrão. Suas dores de cabeça de espaçamento desaparecem porque os itens flexíveis seguem regras diferentes dos elementos regulares. O contêiner agora controla como seus filhos (ou itens) se comportam e você obtém resultados previsíveis em vez das surpresas usuais do CSS.

Direcção flexível

Escolha os itens de direção fluir. Use uma linha para o arranjo da esquerda para a direita.

e uma coluna para empilhar itens verticalmente.

Adicione reverso a qualquer um e os itens virem completamente seu pedido.

Essa escolha define seu eixo central, o que afeta a forma como outras propriedades funcionam.

A mudança das alterações de linha para coluna como o conteúdo justificado e os itens alinhados se comportam, então a direção vem em primeiro lugar em seu planejamento.

Justify-Content

Esta propriedade distribui o espaço restante ao longo do eixo central. Os itens pegam o que precisam e, em seguida, essa propriedade lida com o restante. Use o Flex-Start para agrupar tudo no início, centralize-se para agrupar itens no meio e flexionar o Flex para colocar tudo no final. Ao mesmo tempo, o intermediário do espaço é usado para espalhar itens separados com lacunas iguais. O valor de espaço e a volta fornece a cada item espaço igual de ambos os lados, enquanto o espaço, mesmo que cria lacunas idênticas em todos os lugares.

alinhado-itens

Ele lida com o alinhamento no eixo cruzado. Para layouts horizontais, isso significa alinhamento vertical. Para layouts verticais, ele controla o posicionamento horizontal. Ele suporta valores como Flex-Start, Center, Flex-End, Stretch e Baseling (não os valores espaciais*). Defina -o para o centro e os itens se alinham ao meio, independentemente de suas alturas. O valor padrão é esticado: os itens esticam para preencher o tamanho cruzado do contêiner. Se o tamanho cruzado do contêiner for automático, geralmente é igual ao item mais alto para que os itens pareçam iguais em altura.

FLEX-EMPRAÇÃO

Decide o que acontece quando os itens ficam sem espaço. O padrão Nowrap mantém tudo em uma linha encolhendo itens. Mude para envoltório e itens que não se encaixam em novas linhas, mantendo seus tamanhos preferidos. Você também pode reverter a direção de embalagem. O embrulho transforma sua linha única em várias linhas, criando layouts que se assemelham a grades.

brecha

Adiciona espaço entre itens sem mexer com as margens. Definir lacuna: 20px e cada item fica com espaçamento consistente. Você pode definir lacunas horizontais e verticais diferentes, se necessário. O espaço aparece apenas entre os itens, não nas bordas. Isso supera as margens de cálculo que quebram quando você muda os layouts posteriormente.

Essas propriedades funcionam bem quando você pega o jeito deles. A parte complicada é lembrar o que cada um faz e digitando tudo o que CSS. Você escreve algum código, atualiza seu navegador, vê que não está certo e depois volte e ajusta. Construtores visuais como o Divi virem isso, permitindo que você clique em botões em vez de digitar nomes de propriedades.

Divi 5 torna o Flexbox visual

Ao estabelecermos, o aprendizado do Flexbox é uma coisa; Lembrando o que o Content-Content: o Space-Between faz é outro. Você gasta mais tempo digitando propriedades do que projetar. Em vez de escrever CSS, você usa botões e controles deslizantes que mostram exatamente o que cada opção faz no Divi Builder. O Divi 5 traz isso para o Flexbox, transformando conceitos abstratos em controles simples e clicáveis.

Antes de mergulharmos mais fundo, vamos olhar brevemente o que é Divi.

O que é Divi?

A Divi é um construtor de sites que faz o WordPress funcionar para pessoas que desejam sites bonitos sem o aborrecimento.

Você pode arrastar mais de 200 módulos em torno da sua página e alterar o texto onde ele estiver. Escolha as cores e observe -as aparecer instantaneamente enquanto você trabalha no site real, não em uma prévia que possa mentir para você mais tarde.

O tema inclui mais de 2000 layouts para restaurantes, fotógrafos, consultores e outras empresas, para que você possa encontrar um que você gosta e ajustá -lo até que funcione perfeitamente para suas necessidades.

O construtor de temas fornece controle sobre todas as partes do seu site. Você pode projetar cabeçalhos que se destacam em vez de se parecer com todos os outros, criar páginas de blog que as pessoas querem ler e até tornar suas 404 páginas interessantes o suficiente para que os visitantes permaneçam em vez de sair.

Divi Ai ajuda você a construir rápido

Uma vez, fazer temas e modelos significava fazer malabarismos com diferentes aplicativos para cópias, imagens e idéias de design. Divi Ai reúne tudo o que você precisa em uma interface unificada: exatamente onde você constrói seus sites.

Diga que você precisa de texto e ele escreve.

Peça imagens personalizadas e as cria. Você pode até descrever as edições de fotos e vê -lo fazer as alterações.

Além disso, ele lida com o código e cria novas seções quando você pergunta.

Divi Sites Quick Salva você de encarar uma página em branco sem saber por onde começar. Você pode escolher nos sites iniciais que nossa equipe projetou, com imagens e obras de arte originais que parecem boas.

Você também pode descrever seu negócio para dividir sites rápidos e deixar que ele construa algo do zero usando a IA. Esses sites criados pela IA vêm com manchetes, cópias e imagens reais que correspondem à sua descrição.

Gere tudo com a IA, pegue fotos do Unsplash ou solte os espaços reservados para suas imagens. Defina suas fontes e cores primeiro e depois deixe a IA trabalhar em torno de suas opções de marca, mantendo tudo editável depois.

Divi 5: o construtor de sites à prova de futuro

Divi 5 reconstrói toda a estrutura desde o início.

O Visual Builder corre mais suave, as páginas tornam mais rápido e a base de código pode suportar com mais eficácia os padrões da Web modernos. Você obtém marcação mais limpa, melhor desempenho e uma base pronta para o presente e o futuro.

A interface também é simplificada. As configurações parecem mais logicamente organizadas e as tarefas diárias exigem menos cliques. A experiência geral parece mais receptiva, não importa se você está criando páginas simples ou layouts complexos.

Você obtém a mesma abordagem visual de construção, apenas com uma base muito mais forte por baixo.

O que há de novo no divi 5

A nova arquitetura abre portas para recursos que não eram possíveis antes. Essas mais de 18 adições mudam a maneira como você constrói e gerencia sites.

Aqui está um exemplo do que você recebe:

• Sistema de layout do Flexbox: controles visuais para alinhamento, espaçamento e posicionamento. Os elementos podem crescer, encolher ou embrulhar para novas linhas automaticamente. Trabalha com linhas aninhadas e grupos de módulos para layouts complexos sem código.
• Linhas aninhadas: coloque linhas dentro de outras fileiras com ninho infinito. Crie estruturas de layout complexas sem soluções alternativas de código.
• 17 Módulos WooCommerce: Construtores de página de produtos completos, incluindo galeria de produtos, adicione ao carrinho, críticas, classificações, avisos de estoque, farinha de rosca, meta de produto, upsells e muito mais. Módulos de carrinho e checkout em breve.
• Sistema de interações: crie pop-ups, alternar, rolagem animações, efeitos de movimento do mouse e gatilhos de viewport. Misture vários gatilhos para comportamentos complexos, como banners promocionais que desaparecem após a rolagem.
• Editor Responsivo: Permite visualizar, editar e redefinir pausas responsivas e estados pegajosos para qualquer configuração simultaneamente sem alternar os modos de visualização para edição mais rápida, mais precisa e menos confusa.>>>>>
• Loop Builder: Crie conteúdo dinâmico que retira seu banco de dados. Crie layouts de postagem personalizados, grades de produtos e seções repetidas. Trabalha com produtos WooCommerce.
• Predefinições de grupo de opções: Crie estilos reutilizáveis ​​para tipografia, bordas, sombras e fundos. Aplique -os em qualquer elemento compatível, não apenas módulos únicos.
• Variáveis ​​de design: Defina valores globais para cores, fontes, espaçamento, números, imagens e texto. Altere sua cor primária uma vez e será atualizada em todos os lugares automaticamente.
• Unidades CSS avançadas: use funções Clamp (), Calc (), Min () e Max () através de controles visuais. Nenhum código necessário para a tipografia responsiva e os cálculos de espaçamento.
• Cores relativas e HSL: crie sistemas de cores matematicamente bonitos. Construa variações de cores que mantêm automaticamente a harmonia quando a cor base é alterada.

E mais está chegando! Nossa equipe de desenvolvimento continua adicionando recursos ~ a cada duas semanas, enquanto se preparam para o lançamento beta público.

Uma rápida visão geral da configuração do Flexbox da Divi 5

A abordagem visual do Divi 5 remove as suposições da Flexbox Implementation. Em vez de memorizar nomes de propriedades e digitar CSS, você obtém botões e controles deslizantes que mostram exatamente o que cada controle faz. Dê uma olhada em como é fácil.

1. Configurando sua primeira linha flexível

Comece escolhendo a estrutura da sua linha na seleção de modelo expandida. O Divi 5 oferece muito mais opções de layout, incluindo colunas iguais, grades de várias fileiras e configurações de várias colunas.

Novas seções no Divi 5 começam com o Flexbox automaticamente. Quando você adiciona uma nova linha, ele está pronto com as propriedades flexíveis ligadas. Mas se você estiver trabalhando com seções existentes das versões mais antigas do Divi, precisará alterná -las manualmente do layout de bloco padrão para flexionar clicando no ícone Configurações em sua linha, navegando para a guia Design> Layout e alterando "Bloco" para "Flex".

2. Entendendo a direção, fluxo, alinhamento

O campo de direção do layout determina onde os itens acabam. A linha é a configuração padrão, que faz com que os itens se alinhem horizontalmente.

Mude para a coluna e os itens empilham elementos verticalmente como layouts da Web regular.

Ambas as opções vêm com versões reversas que alternam completamente a ordem.

Enquanto isso, o Justify Content decide o que acontece com o espaço restante ao longo do eixo principal. Para as linhas, iniciar significa esquerda, centros intermediários horizontalmente e o fim se alinha à direita.

Para colunas, iniciar significa de cima, centros médios tudo e final empurra os itens para o fundo.

Além do alinhamento padrão de partida, centro e final, você também tem espaço entre os itens separados com lacunas iguais, perfeitas para menus de navegação ou layouts de cartão.

O espaço ao redor oferece a cada item de espaço de respiração igual de ambos os lados, o que é útil quando você deseja margens consistentes. E o espaço cria uniformes de lacunas idênticas em todos os lugares, ideais para espaçamento visual equilibrado.

Alinhar itens funciona perpendicularmente à sua direção de fluxo. Se você escolher o layout da linha, isso controla o posicionamento vertical dos itens.

Se você escolheu o layout da coluna, ele lida com o alinhamento horizontal.

O centro mantém tudo alinhado ao meio, os itens iniciais posicionam na borda inicial, a extremidade os empurra para a borda distante e o trecho faz com que os itens preencham o espaço disponível.

Esses controles resolvem dores de cabeça comuns sem cálculos CSS personalizados.

3. Espacando as coisas com controles de lacunas

Os controles de lacunas adicionam espaço entre itens flexíveis no seu contêiner: colunas, módulos e qualquer trabalho de tipo de conteúdo funcionar. As lacunas criam espaço para respirar sem preenchimento bagunçado ou matemática de margem. A lacuna aparece apenas entre os itens, não nas bordas externas.

Defina sua lacuna horizontal para 20px e cada coluna terá esse espaçamento exato.

Altere a lacuna vertical para 20px e todas as lacunas serão atualizadas instantaneamente.

O Divi 5 suporta unidades CSS avançadas, como comprimentos e porcentagens de viewport. Você pode usar o CLAMP () para lacunas responsivas que escalem entre os tamanhos da tela. A função calc (), que combina unidades como Calc (2REM + 10px), também é suportada.

Os controles de lacunas aqui também suportam variáveis ​​de design. Adicione uma variável numérica chamada “lacuna de coluna horizontal” com grampo (16px, 2VW, 32px) como o valor. Aplique essa variável aos controles de lacunas em seu site.

Quando você quiser espaçamento mais apertado mais tarde, edite a variável; Cada lacuna será atualizado instantaneamente.

4. Controlar como os itens envolvem

O layout de embrulho controla o que acontece quando os itens ficam sem espaço horizontal. A configuração padrão de nenhum invólucro mantém tudo em uma linha encolhendo itens para se ajustar ao contêiner. Mude para embrulho e itens que não se encaixam em novas linhas, mantendo seus tamanhos naturais.

O Wrap Reverse faz a mesma coisa que o envoltório comum, mas vira a direção. Novas linhas aparecem acima das anteriores, em vez de abaixo.

Isso fornece controle sobre a hierarquia visual quando os itens transbordam. O comportamento de embalagem permanece consistente em diferentes tamanhos de tela; portanto, o layout se adapta previsivelmente do desktop ao celular sem quebrar.

O Divi 5 também oferece controles de alinhamento de embalagem. Esse recurso aparece automaticamente ao ativar os formulários Flex de embalagem e de múltiplas linhas. Quando a direção é configurada para linha, o alinhamento de embalagem está disponível para alinhamento vertical.

Da mesma forma, para a direção da coluna, as opções são para o alinhamento horizontal.

O alongamento faz com que todas as linhas se expandam para preencher o espaço vertical disponível. Inicie os cachos de linhas no início, os aglomerados centrais no meio e terminam empurrando -os em direção à borda oposta.

O espaço entre as linhas de spreads separadas com lacunas iguais, o espaço ao redor oferece a cada linha igual à respiração de ambos os lados e o espaço cria unidades idênticas entre todas as linhas.

Isso funciona muito bem para layouts de cartão, galerias de imagens ou qualquer conteúdo que precise fluir naturalmente em várias linhas. Os itens mantêm suas proporções e espaçamento durante a reorganização com base na largura disponível. Você recebe pausas limpas sem que os itens sejam esmagados em telas pequenas.

5. Trabalhando em diferentes tamanhos de tela

Os sete pontos de interrupção do Divi 5 oferecem controle granular sobre como seus layouts se adaptam.

Cada ponto de interrupção funciona de forma independente, para que você possa alternar a direção do layout para a coluna no celular enquanto o layout da linha da área de trabalho permanece intocado. Você pode centralizar tudo em telefones, mas mantenha esse espaço entre o alinhamento em telas maiores.

Sua configuração de três colunas na área de trabalho pode se tornar uma pilha de coluna única no celular sem afetar os pontos de interrupção do meio. Cada tamanho de tela obtém exatamente o que funciona melhor para essa experiência de visualização.

O novo editor responsivo torna esse processo muito mais suave. Clique no ícone do editor responsivo ao lado de qualquer configuração para visualizar e modificar valores para todos os tamanhos de tela de uma só vez.

No entanto, se você estiver usando os valores do Clamp () para interromper suas linhas e colunas, isso se escalaria automaticamente entre os pontos de interrupção sem a necessidade de alterações manuais.

6. Criação de predefinições de grupo de opções

Depois de obter o layout do Flexbox funcionando da maneira que você deseja, você pode salvar essas configurações como um grupo de opções predefinindo clicando na opção Opção Group Presefts e rotulando -a apropriadamente.

Seus valores de lacuna, opções de alinhamento e configurações de embrulho são agrupados. Quando você clica em Salvar, a configuração exata do layout se torna reutilizável em seu site. Quando você deseja usar a predefinição salva, clique no ícone predefinido na nova linha e selecione a predefinição que você acabou de salvar.

A predefinição mantém intactas suas unidades avançadas. Suas transferências de espaçamento responsivas com todas as contas que você configurou e as alterações foram feitas em diferentes pontos de interrupção.

Comece hoje com o Flexbox da Divi 5

O Flexbox elimina a margem e o preenchimento de matemática que quebra quando você muda de layouts. Você para de brincar com o design responsivo com consultas de mídia e seções personalizadas.

Divi 5 transforma essas propriedades abstratas do CSS em controles visuais. Você pode clicar em botões para definir a direção, arrastar os controles deslizantes para ajustar as lacunas e colocar e desligar o envolvimento. O editor responsivo lida com todos os sete pontos de interrupção de um painel, para que você veja os resultados instantaneamente, em vez de adivinhar o código.

Salve combinações bem -sucedidas como predefinições e reutilize -as em qualquer lugar. Você gasta tempo projetando em vez de depurar a sintaxe do CSS.