Flexbox: Pare de Brigar com Layout CSS
Flexbox é um sistema de layout unidimensional. Ele lida com linhas ou colunas (não ambos — isso é Grid). Quando entender os dois eixos e um punhado de propriedades, nunca mais usará hacks com float.
Os Dois Eixos
flex-direction: row (padrão)
Eixo Principal →→→→→→→→→→→→→
↓ Eixo Transversal
flex-direction: column
Eixo Principal ↓↓↓↓↓↓↓↓↓↓↓↓
→ Eixo Transversal →→→→→→→→justify-content funciona no eixo principal. align-items funciona no eixo transversal.
Propriedades do Container
.container {
display: flex;
/* Direção */
flex-direction: row; /* → esquerda para direita */
flex-direction: column; /* ↓ cima para baixo */
/* Quebra de linha */
flex-wrap: nowrap; /* linha única (padrão) */
flex-wrap: wrap; /* quebra para próxima linha */
/* Alinhamento eixo principal */
justify-content: flex-start; /* |■ ■ ■ | */
justify-content: center; /* | ■ ■ ■ | */
justify-content: space-between; /* |■ ■ ■| */
justify-content: space-evenly; /* | ■ ■ ■ | */
/* Alinhamento eixo transversal */
align-items: stretch; /* itens preenchem altura (padrão) */
align-items: center; /* itens centralizados verticalmente */
/* Espaço entre itens */
gap: 16px;
}Propriedades dos Itens
.item {
/* Crescer: quanto do espaço restante pegar */
flex-grow: 1; /* pegar parte igual */
/* Encolher: quanto encolher quando espaço é apertado */
flex-shrink: 0; /* nunca encolher */
/* Base: tamanho inicial antes de grow/shrink */
flex-basis: 200px;
/* Atalho (mais comum) */
flex: 1; /* crescer igualmente */
flex: 0 0 200px; /* fixo 200px */
/* Sobrescrever alinhamento para este item */
align-self: center;
}Padrões Comuns
/* Centralizar tudo */
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* Barra de navegação */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Sidebar + conteúdo principal */
.layout { display: flex; }
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }
/* Grid de cards que quebra */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 300px; /* mín 300px, cresce para preencher */
}
/* Footer grudado no fundo */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page > main { flex: 1; }Referência CSS: Cheatsheet CSS — Flexbox, Grid e todas as propriedades CSS em uma página pesquisável.