O CSS Flexbox é um modelo de layout unidimensional projetado para distribuir o espaço entre itens em um contêiner e alinhar esses elementos de forma flexível. O Gerador de Flexbox permite configurar visualmente um contêiner flex e seus itens com controles visuais, veja o layout reagir em tempo real e copie o CSS com um clique.
O processamento do layout ocorre inteiramente no lado do cliente. Seu layout é criado diretamente no seu navegador. Nada do que você define aqui é enviado para o BroBroGo.
O papel dos eixos no Flexbox
O comportamento de um layout Flexbox é determinado por dois eixos: o eixo principal (main axis) e o eixo transversal (cross axis). A relação entre esses eixos dita como as propriedades de alinhamento interagem com os elementos na tela.
Ao alterar a propriedade Direção, o eixo principal e o eixo transversal são redefinidos:
- Linha: O eixo principal corre horizontalmente (da esquerda para a direita), e o eixo transversal corre verticalmente.
- Linha reversa: O eixo principal corre horizontalmente, mas no sentido inverso (da direita para a esquerda).
- Coluna: O eixo principal corre verticalmente (de cima para baixo), invertendo a função dos eixos. O eixo transversal passa a ser horizontal.
- Coluna reversa: O eixo principal corre verticalmente de baixo para cima.
Essa inversão de eixos altera diretamente o comportamento das propriedades de alinhamento. O Alinhamento principal (Justify content) sempre atua ao longo do eixo principal, enquanto o Alinhar itens (Align items) atua ao longo do eixo transversal. Portanto, ao mudar a direção de linha para coluna, o controle que antes alinhava horizontalmente passa a alinhar verticalmente, e vice-versa.
Propriedades de controle do contêiner
O contêiner flexível define o contexto de posicionamento para todos os seus elementos filhos diretos. No Gerador de Flexbox, as seguintes propriedades estruturais do contêiner podem ser ajustadas:
- Direção: Define o sentido do eixo principal através das opções Linha, Linha reversa, Coluna e Coluna reversa.
- Quebra de linha (Wrap): Controla se os itens são forçados a permanecer em uma única linha ou se podem quebrar para múltiplas linhas. As opções são Sem quebra, Quebrar linha e Quebra reversa.
- Alinhamento principal (Justify content): Distribui o espaço extra ao longo do eixo principal. Pode ser configurado como Início, Fim, Centralizar, Espaço entre, Espaço ao redor ou Espaço igual.
- Alinhar itens (Align items): Define o alinhamento padrão dos itens ao longo do eixo transversal na linha atual. As opções incluem Início, Fim, Centralizar, Esticar (Stretch) e Linha de base (Baseline).
- Alinhar conteúdo (Align content): Alinha as linhas do contêiner quando há espaço extra no eixo transversal. Esta propriedade só tem efeito prático quando a quebra de linha está ativa e existem múltiplas linhas de itens. Suas opções são Início, Fim, Centralizar, Esticar (Stretch), Espaço entre, Espaço ao redor e Espaço igual.
- Espaçamento (Gap): Define uma folga numérica diretamente entre os itens e entre as linhas geradas, eliminando a necessidade de margens externas nos elementos individuais.
Propriedades de controle dos itens individuais
Cada item dentro do contêiner flexível pode ter seu comportamento de dimensionamento e posicionamento ajustado individualmente. O gerador permite selecionar um item específico para modificar suas propriedades exclusivas:
- Ordem (Order): Aceita um valor numérico para alterar a sequência de exibição do item em relação aos outros, sem modificar a estrutura do código HTML.
- Crescimento (Grow): Um valor numérico que determina a capacidade do item de crescer para preencher o espaço restante disponível no contêiner.
- Encolhimento (Shrink): Um valor numérico que define a capacidade do item de encolher quando o espaço do contêiner é menor do que o tamanho base dos itens.
- Base (Basis): Define o tamanho inicial do item antes da distribuição do espaço restante. Pode ser definido com um valor numérico ou como Base automática.
- Alinhar-se (Align self): Permite que um item individual ignore o alinhamento padrão definido pelo contêiner para o eixo transversal. As opções são Automático, Início, Fim, Centralizar, Esticar (Stretch) e Linha de base (Baseline).
No código gerado, apenas os itens que tiverem suas propriedades explicitamente alteradas em relação aos valores padrão receberão regras CSS individuais.
Estruturas de layout comuns
O Flexbox simplifica a criação de padrões de design comuns na web. O gerador oferece predefinições para visualizar e exportar essas estruturas rapidamente:
- Centralizado: Alinha perfeitamente um elemento no centro vertical e horizontal do contêiner.
- Barra de navegação: Distribui os links de navegação horizontalmente, geralmente utilizando o espaçamento para separar a marca dos itens de menu.
- Pilha: Organiza os elementos verticalmente em uma coluna com espaçamento uniforme.
- Cartões: Cria uma grade flexível de cartões que quebram de linha de forma responsiva conforme a largura da tela diminui.
- Barra lateral: Posiciona uma coluna lateral de largura fixa ou ajustável ao lado de uma área de conteúdo principal que se expande para ocupar o espaço restante.
Perguntas Frequentes
Qual é a diferença entre justify-content e align-items?
Justify-content distribui os itens ao longo do eixo principal — a direção em que a linha ou coluna flui —, enquanto align-items os posiciona ao longo do eixo transversal. Mude a direção de linha (row) para coluna (column) e os dois eixos se invertem, fazendo com que o justify-content passe a funcionar de cima para baixo e o align-items da esquerda para a direita.
Como funcionam os controles individuais por item?
Selecione um item pelo seu número e defina o quanto ele cresce para preencher o espaço restante (grow), o quanto encolhe quando o espaço está apertado (shrink), seu tamanho inicial (basis) e seu próprio alinhamento no eixo transversal. A propriedade order move um item para antes ou depois na tela sem alterar o HTML. Apenas os itens que você realmente modificar receberão uma regra própria no CSS gerado.
Quando as propriedades wrap e align-content fazem diferença?
Com a quebra (wrap) desativada, todos os itens são forçados a ficar em uma única linha e podem ser espremidos. Ao ativá-la, os itens que não couberem passam para a linha seguinte — é aí que o align-content entra em ação, distribuindo as linhas como um grupo. A propriedade gap define o espaço entre os itens e entre as linhas, sem a necessidade de margens.