Carregando...

Flex responsivo CSS

Flex Items dimensionou cada filho. Flex responsivo faz a próxima pergunta: quando o viewport encolhe, essa linha flex deve quebrar, empilhar ou inverter a direção? Aprenda alguns padrões calmos de media query — os módulos profundos de Responsive Design e Media Queries vêm depois.

Uma caixa de ferramentas flex responsivo

📊 Flex responsivo em um olhar

Ferramenta Trabalho do dia a dia
flex-wrap Deixa os itens irem para uma nova linha quando a fileira fica estreita demais
flex-direction Alterna row ↔ column em um breakpoint para empilhar seções
Media query Aplica uma nova regra flex só quando o viewport corresponde
flex-basis / min-width Indica quando os cards quebram ou ficam lado a lado
gap Mantém o espaçamento honesto quando as linhas quebram
Evitar order para layout Preserve a ordem do DOM para teclado e leitores de tela

Comece de uma base flex legível (desktop ou mobile-first). Em um breakpoint claro, mude só o que precisa mudar — wrap, direção ou basis — não todas as propriedades de uma vez.

flex-wrap — deixe a fileira respirar

Quando os cards devem ficar em fileira em telas largas e quebrar em vez de esmagar para sempre, ative o wrap e dê a cada card um basis sensato.

Wrapping card row

css 
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

Inversão de direção no breakpoint

Padrão clássico: lado a lado em viewports largos, coluna empilhada nos estreitos. Mude flex-direction dentro de uma media query — mantenha o mesmo HTML.

Stack on small screens

css 
.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

Basis e min-width para o reflow

Combine wrap com flex-basis ou min-width para que os itens decidam quando cair. Um breakpoint também pode redefinir o basis se um tamanho nunca quebra limpo.

Basis at a breakpoint

css 
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

Viewports estreitos não são outra linguagem de layout — as mesmas ferramentas flex, valores diferentes. Mude direção ou wrap; não invente uma segunda árvore HTML.

Um hábito flex responsivo calmo

Primeiro um breakpoint principal. Prefira wrap e inversões de direção a remanejamentos com order. Mantenha a ordem do código-fonte sensata. Deixe imagens fluidas, sistemas complexos de breakpoint e a teoria Responsive completa para lições posteriores.

Named stack roles

css 
.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css 
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

Experimente você

  1. Monte uma fileira de cards com flex-wrap: wrap e flex: 1 1 14rem.
  2. Inverta um shell para flex-direction: column sob max-width: 40rem.
  3. Force ações da barra de ferramentas a flex-basis: 100% em um breakpoint pequeno.
  4. Adicione min-width para que os chips quebrem em vez de esmagar.
  5. Resista a usar order para «consertar» o layout responsivo.

Erros comuns

  • Só encolher itens para sempre em vez de quebrar ou empilhar
  • Usar order como ferramenta de layout responsivo e quebrar a ordem de tabulação
  • Esquecer flex-wrap e se perguntar por que os cards nunca caem
  • Despejar toda propriedade flex em uma media query gigante
  • Tratar esta lição como o curso inteiro de Responsive Design

Resumo

  • Flex responsivo adapta wrap, direção e basis entre larguras
  • flex-wrap mais basis/min-width sensato deixa as fileiras refluir
  • Media queries invertem flex-direction para empilhar em telas estreitas
  • Prefira breakpoints calmos; evite order para truques de layout
  • Módulos mais profundos de Responsive e Media Queries vêm depois

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 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
Tópico 48 de 51
Css Tutorial