O que é CSS Flexbox?
CSS Flexbox (Flexible Box Layout) é um modelo de layout unidimensional que distribui espaço entre itens em um container. Ele simplifica o alinhamento, ordenação e dimensionamento de elementos ao longo de um eixo principal e um eixo transversal, tornando layouts responsivos mais fáceis de construir sem floats ou hacks de posicionamento.
Propriedades Principais do Flexbox
- flex-direction: Define o eixo principal (row, column ou seus reversos).
- flex-wrap: Controla se os itens quebram para novas linhas.
- justify-content: Alinha itens ao longo do eixo principal.
- align-items: Alinha itens ao longo do eixo transversal.
- gap: Define espaçamento entre itens flex sem margens.
Perguntas Frequentes
Quando devo usar Flexbox vs Grid?
Use Flexbox para layouts unidimensionais (uma única linha ou coluna de itens). Use CSS Grid para layouts bidimensionais onde você precisa de controle sobre linhas e colunas simultaneamente.
O Flexbox é suportado em todos os navegadores?
Sim. CSS Flexbox é suportado em todos os navegadores modernos incluindo Chrome, Firefox, Safari e Edge. Nenhum prefixo de vendor é necessário para implementações atuais.