Flexbox CSS
Componentes de página esboçaram cascas, barras, menus e galerias. Flexbox é o jeito moderno de alinhar itens numa direção — linha ou coluna — com menos confusão de float. Ative display: flex, conheça os flex items e aprofunde nas próximas lições de Flexbox.
Um kit inicial de Flexbox
📊 Flexbox em um olhar
| Ideia | Trabalho do dia a dia |
|---|---|
| Contêiner flex | Pai com display: flex (ou inline-flex) |
| Itens flex | Filhos diretos que participam do layout flex |
| Eixo principal | Direção primária em que os itens viajam (linha por padrão) |
| Eixo transversal | A direção perpendicular para alinhamento |
gap |
Espaço embutido entre itens |
| Próximas lições | Props de contêiner, props de item, padrões flex responsivos |
Flexbox é mais forte em uma dimensão. Para grades de página bidimensionais completas, o módulo Grid vem depois desta trilha Flexbox.
Ative um contêiner flex
Coloque display: flex no pai. Os filhos viram flex items e sentam em linha por padrão.
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
Gap em vez de brigas com margin
gap espaça itens sem truques de collapse. Prefira-o para calhas uniformes entre filhos flex.
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
Empurre itens no eixo principal
justify-content distribui espaço livre ao longo do eixo principal. space-between é um padrão clássico de cabeçalho: marca à esquerda, ações à direita.
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Centralize no eixo transversal — e nos dois
align-items: center alinha itens no eixo transversal. Combine com justify para um agrupamento calmo centrado dentro de uma caixa.
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
Quebre quando a linha acaba o espaço
flex-wrap: wrap deixa itens caírem na próxima linha — você já viu um pouco disso na galeria. A lição Flex Responsive vai mais longe.
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
Um hábito calmo de Flexbox
Use Flexbox para linhas e colunas unidimensionais: navs, barras de ferramentas, fileiras de cards, centralização. Depois detalhes do contêiner, crescimento/encolhimento do item e flex responsivo. Não espere que Flexbox sozinho substitua todo layout Grid.
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
Experimente você mesmo
- Faça um
.toolbarcomdisplay: flexe três botões. - Adicione
gapealign-items: center. - Monte um cabeçalho com
justify-content: space-between. - Centralize um par de botões numa caixa com justify + align.
- Anote qual lição futura cobre ideias de
flex-grow/flex-basis.
Erros comuns
- Espalhar
display: flexem todo wrapper sem meta de layout - Esperar que Flexbox se comporte como um Grid 2D completo
- Brigar com espaçamento via margins aleatórias em vez de
gap - Pular as próximas lições e memorizar só esta intro
- Ficar em linhas float para sempre quando uma linha flex é mais clara
Resumo
- Flexbox organiza itens ao longo de um eixo principal
display: flexcria um contêiner; os filhos são flex itemsgap,justify-contentealign-itemsliberam linhas do dia a dia- Wrap dá um vislumbre de linhas responsivas; mais vem depois
- Lições de contêiner, item e Flexbox responsivo aprofundam o modelo a seguir
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo