Flexbox e layout da página

Este capítulo alinha o cabeçalho e os cartões da home com Flexbox. O exemplo está em exemplos/08-flexbox/. Redimensione a janela: os cartões devem descer quando não couberem.

Flexbox organiza itens em uma dimensão: uma linha ou uma coluna. O container recebe display: flex. Os filhos viram itens.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

• Separar container e item.
• Usar display: flex e flex-flow.
• Distribuir no eixo com justify-content.
• Distinguir flex-basis e width.
• Quebrar linha com flex-wrap na home da Oficina.

Container e item

Só o pai precisa de display: flex. Os filhos entram no jogo automaticamente. Um neto não fica flex só porque o avô é flex.

.principal {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

flex-flow junta flex-direction e flex-wrap. row wrap alinha em linha e quebra quando falta espaço. justify-content distribui no eixo principal. space-between joga o logo para um lado e o menu para o outro.

align-items alinha no eixo cruzado. center centra logo e menu na vertical. gap é o vão entre itens, sem depender do espaço no HTML.

Os cartões da home

A seção .grades é o container. Cada .cartao é um item.

.grades {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}
.grades .cartao {
  flex-basis: 18rem;
  flex-grow: 1;
}

Com flex-wrap: wrap (dentro do flex-flow), o terceiro cartão desce quando a soma das bases não cabe. Em tela larga, flex-grow: 1 deixa os cartões dividirem o espaço que sobra.

O HTML da home continua semântico: section com article dentro. Flexbox não troca a tag.

<section class="grades" aria-label="Próximas oficinas">
  <article class="cartao">
    <h2>Cerâmica</h2>
    <p>Sábado, 9h. Vagas para 12 pessoas.</p>
  </article>
  <article class="cartao">
    <h2>Xilogravura</h2>
    <p>Domingo, 14h. Tinta e madeira inclusas.</p>
  </article>
  <article class="cartao">
    <h2>Fotografia</h2>
    <p>Quarta, 18h. Câmera do espaço ou a sua.</p>
  </article>
</section>

flex-basis não é width

width é a largura clássica da caixa. flex-basis é o tamanho inicial do item no eixo principal, antes de crescer ou encolher.

Neste volume o eixo é a linha. flex-basis: 18rem diz: tente ter 18 rem de largura. Depois flex-grow e flex-shrink ajustam.

Se você declarar só width: 18rem num item flex, o item pode recusar crescer. flex-basis conversa melhor com o container.

O atalho flex: 1 1 18rem significa: cresça, encolha, base 18 rem. Enquanto estuda, declare as partes. O exemplo usa flex-basis e flex-grow separados.

Pare e experimente. Troque flex-basis: 18rem por flex-basis: 30rem. Recarregue numa janela de notebook. Dois cartões devem caber menos vezes na mesma linha. Restaure 18rem.

Quebrar, não espremer

Sem wrap, os itens tentam ficar numa linha só e espremem o conteúdo. Com wrap, o item que não cabe desce.

O cabeçalho também usa wrap. Em tela estreita o menu pode ir para a linha de baixo. Isso é melhor do que letras coladas.

A foto do recorte, no capítulo 7, ainda pode flutuar em telas largas. Em telas estreitas o exemplo desta etapa desliga o float e a imagem ocupa a largura do texto. Float continua não sendo a grade.

Erro comum: pôr display: flex no body e esperar que os cartões se organizem. O container dos cartões é .grades, não o body. Flex não “vaza” para netos.

Pare e experimente. Tire wrap do .grades — deixe flex-flow: row nowrap. Recarregue numa janela estreita. Os três cartões devem espremer numa linha. Recoloque wrap.

O que Flexbox não substitui

HTML semântico continua obrigatório. Um cartão é article, não div “porque agora é flex”.

Skip-link, lang="pt-BR", viewport, alt e o foco de 3 px permanecem. Layout novo não apaga acesso.

Não volte ao float para imitar esta home. Se um cartão quebrar de forma estranha, confira o container, o wrap e a flex-basis — não acrescente float: left.

Atividades

1. Quem recebe display: flex: o cartão ou a seção .grades?
2. Qual a diferença prática entre flex-basis: 18rem e width: 18rem no item?
3. O que falta se os cartões não descem em janela estreita?
4. No exemplo 08-flexbox, qual regra afasta o logo do menu no cabeçalho?

Respostas comentadas

1. A seção .grades. Ela é o container. Os cartões são itens.
2. flex-basis é o ponto de partida no eixo flex, antes de crescer ou encolher. width não participa desse acordo com a mesma clareza.
3. flex-wrap: wrap (ou flex-flow com wrap). Sem quebra, os itens espremem numa linha.
4. justify-content: space-between em .principal, junto com display: flex.

Referências

• Flexbox
• flex-basis
• justify-content