Projeto Flexbox: monte um checkout responsivo

O projeto final reúne as decisões do curso num checkout da livraria. O objetivo não é colocar display: flex em toda div, mas reconhecer pequenos grupos unidimensionais: links do cabeçalho, dados de um produto e ações do resumo.

Pense em organizar um balcão por estações. Uma estação recebe navegação, outra confere itens e outra fecha o pagamento. Cada estação tem uma direção e uma regra de espaço próprias. No CSS, cada estação vira um container flexível e seus controles viram itens. O limite da analogia é que containers podem estar aninhados e o tamanho de um afeta o espaço disponível do outro; por isso a gente testa o conjunto em várias larguras.

Comece pela ordem que precisa ser lida

Escreva o item do carrinho na sequência natural:

<article class="item">
  <div class="capa" aria-hidden="true">HTML</div>
  <div class="dados">
    <h2>HTML sem Mistério</h2>
    <p>Entrega digital</p>
  </div>
  <strong class="preco">R$ 39</strong>
  <button type="button">Remover</button>
</article>

Imagem, descrição, preço e ação formam uma leitura coerente sem CSS. Essa é sua proteção para telas pequenas e tecnologias assistivas. Não use order para consertar marcação escrita ao contrário.

Dê flexibilidade a quem pode negociar espaço

O bloco de dados pode crescer e encolher; capa, preço e botão devem preservar o conteúdo:

.item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.capa {
  flex: 0 0 4rem;
}

.dados {
  flex: 1 1 14rem;
  min-width: 0;
}

.preco,
.item button {
  flex: 0 0 auto;
}

Essa regra volta ao algoritmo técnico: basis define o começo, grow entrega a sobra a .dados e shrink permite reduzir esse bloco. min-width: 0 evita que um título longo force overflow. Os controles mantêm tamanho ligado ao próprio conteúdo.

Quebre quando a linha deixar de ajudar

Em tela estreita, autorize wrap em vez de espremer tudo:

@media (max-width: 34rem) {
  .item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dados {
    flex-basis: calc(100% - 5rem);
  }
}

O breakpoint não representa um aparelho específico; ele marca o ponto em que o conteúdo deixa de caber com clareza. Arraste a largura lentamente e escolha esse ponto observando o layout.

Evite transformar o checkout inteiro num único container flexível. O cabeçalho tem sua própria fila, cada produto tem outra e o resumo forma um terceiro grupo. Containers pequenos deixam claro quem pode crescer, quem pode quebrar e qual eixo pertence a cada decisão. Um item da fila externa pode ser container da fila interna sem conflito: ele exerce dois papéis em contextos diferentes.

Um erro frequente é colocar justify-content: space-between no item e considerar o trabalho encerrado. Com títulos diferentes, os intervalos mudam e o botão pode saltar de posição. Outro erro é usar position: absolute no preço; ele sai do fluxo e cobre texto quando a fonte cresce. Distribua responsabilidade com basis, grow, shrink e gap.

Faça a revisão que encerra o curso

Personalize o laboratório e teste 320, 768 e 1280 pixels. Aumente o texto do título, navegue apenas com Tab e aplique zoom de 200%. Não precisa ficar idêntico em todas as larguras; precisa conservar conteúdo, ordem e controles utilizáveis.

A missão termina com três produtos, nenhum scroll horizontal, foco na mesma ordem apresentada e todos os intervalos criados por gap ou padding intencional. Por fim, explique por que cada grupo usa Flexbox. Se sua resposta for “porque organiza uma linha ou coluna”, o mecanismo e a escolha finalmente estão conectados.