O que é o Flexbox?
O Flexbox (Flexible Box Layout) é um modelo de layout unidimensional que permite organizar elementos em uma linha ou coluna de forma flexível e responsiva.
É ideal para:
- Alinhar elementos horizontalmente ou verticalmente;
- Distribuir espaço entre itens de forma automática;
- Reordenar elementos sem alterar o HTML;
- Criar layouts responsivos que se adaptam ao tamanho da tela.
Conceitos Básicos
1. Container (Flex Container)
O elemento pai que possui display: flex;
Controla como os filhos são organizados.
2. Itens (Flex Items)
Os elementos filhos diretos do container flex. São automaticamente flexíveis.
3. Eixo Principal (Main Axis)
A direção principal do layout. Por padrão é horizontal (da esquerda para direita).
4. Eixo Cruzado (Cross Axis)
O eixo perpendicular ao principal. Se o principal é horizontal, o cruzado é vertical.
Propriedades do Container
flex-direction
Define a direção dos itens no container:
flex-direction: row; (padrão)
flex-direction: column;
justify-content
Alinha itens ao longo do eixo principal:
justify-content: center;
justify-content: space-between;
align-items
Alinha itens ao longo do eixo cruzado:
align-items: center;
Propriedades dos Itens
flex-grow
Define quanto um item deve crescer em relação aos outros:
flex-grow: 2; (no item 2)
flex-shrink
Define quanto um item deve encolher quando necessário:
flex-shrink: 0; (no item 2)
flex-basis
Define o tamanho inicial do item antes da distribuição do espaço:
flex-basis: 200px; (no item 2)
Exemplo Prático: Layout de Navegação
Um exemplo comum de uso do Flexbox é criar uma barra de navegação:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.nav-links {
display: flex;
gap: 1rem;
}
🧩 Área de Testes
Altere as classes abaixo no arquivo flexbox.css para experimentar com diferentes propriedades do Flexbox.