
Conceitos básicos de Flexbox
O Flexbox (CSS Flexible Box Layout) foi criado para distribuir espaço e alinhar
elementos em containers, mesmo quando o tamanho dos itens é desconhecido ou
dinâmico. Ele substitui “hacks” baseados em float
e tabelas e hoje é
suportado por todos os navegadores modernos.
Principais conceitos
- Flex Container — o elemento pai com
display:flex
(ouinline-flex
). - Main Axis — eixo principal onde os itens são distribuídos (
row
oucolumn
). - Cross Axis — eixo perpendicular ao main axis.
- Flex Items — filhos diretos do container que podem crescer, encolher ou ter largura fixa.
Sintaxe mínima
.container {
display: flex; /* ativa o modelo flex */
flex-direction: row; /* eixo principal horizontal (padrão) */
gap: 1rem; /* espaçamento entre itens */
}
.item {
flex: 1 1 200px; /* grow | shrink | basis */
}
Consulte a lista completa de propriedades (justify-content
,
align-items
, flex-wrap
, etc.) e exemplos interativos na MDN.