Organize ações com Flexbox

Neste capítulo você vai distribuir links numa direção e permitir que eles passem para outra linha quando faltar espaço.

Seu ponto de partida

Continue depois do capítulo 06. Abra pacote de exemplos/07-flexbox. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Veja o fluxo antes de mudar o layout

Layout é a distribuição dos elementos na página. Antes de usar um recurso novo, observe a distribuição que já existe. No fluxo normal, blocos como parágrafos ocupam uma nova linha; links podem compartilhar a mesma linha.

O grupo Ações reúne três links. A marca div é um recipiente sem significado próprio; aqui ela agrupa os links para receber uma regra de apresentação. A classe acoes identifica esse grupo.

Você vai mudar apenas a distribuição interna do grupo. O cabeçalho, a coluna de leitura e o rodapé continuam sob a organização do Simple.css. Não precisamos reescrever toda a página para alinhar três ações.

Flexbox trabalha principalmente numa direção de cada vez, como uma linha ou uma coluna. Comece pela linha e observe uma propriedade por etapa.

Faça no seu exemplo

Em custom.css, acrescente a regra para o grupo .acoes que já existe em index.html.

.acoes {
  display: flex;
}

Mude uma coisa e preveja

Acrescente flex-direction: column dentro das mesmas chaves.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve e recarregue. Compare e depois remova flex-direction: column para recuperar a direção padrão em linha.

Resultado esperado neste teste: Os links devem formar uma coluna, em vez de uma linha principal.

Se não acontecer

Aplicar display: flex em cada link não organiza o grupo. A regra precisa escolher o recipiente que contém os itens.

Crie espaço entre os itens

Os links estão no mesmo grupo, mas precisam de separação para não parecerem uma única ação. Gap define o espaço entre itens de um layout Flexbox ou Grid.

Align-items organiza o alinhamento no eixo transversal. No caso de uma linha horizontal, esse eixo é vertical. Center alinha os itens ao centro nessa direção. Justify-content trata a distribuição na direção principal; começaremos com os itens no início, sem espalhá-los artificialmente.

Não é necessário decorar todos os valores de alinhamento. Ver um grupo pequeno e modificar uma propriedade permite entender o papel de cada uma.

As classes button usadas nos links fornecem sua aparência. Flexbox organiza o grupo; não transforma os links em outro tipo de controle.

Faça no seu exemplo

Acrescente esta regra depois de display: flex em custom.css. As declarações se combinam.

.acoes {
  gap: 0.75rem;
  align-items: center;
}

Mude uma coisa e preveja

Troque somente gap: 0.75rem por gap: 1.5rem.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Observe os espaços em janela larga e restaure 0.75rem. Use Tab para conferir a mesma ordem dos links.

Resultado esperado neste teste: A separação entre links deve aumentar, sem alterar o tamanho do texto.

Se não acontecer

Gap cria espaço entre itens. Ele não substitui padding quando você quer ampliar o espaço dentro de um link.

Permita a quebra de linha

Numa janela estreita, três links largos podem não caber lado a lado. O comportamento padrão do Flexbox tenta mantê-los na mesma linha. Flex-wrap: wrap permite criar linhas adicionais.

Quebrar a linha não significa que o layout falhou. É uma adaptação esperada quando não há espaço. Um link pode ir para a linha seguinte e continuar legível e fácil de ativar.

O exemplo usa textos de ações que podem crescer. Teste palavras reais, não apenas três botões chamados A, B e C. Um layout que só cabe com textos curtos pode falhar quando o conteúdo muda.

Não use order para fazer a posição visual divergir da sequência do HTML neste exercício. Quem navega por teclado precisa percorrer uma ordem coerente com o que vê.

Faça no seu exemplo

Acrescente a regra em custom.css.

.acoes {
  flex-wrap: wrap;
}

Mude uma coisa e preveja

Troque o texto do último link por Revisar minhas perguntas de estudo.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Estreite a janela até observar a quebra. Confira se os links não se sobrepõem e se Tab segue a ordem do texto. Restaure o texto original.

Resultado esperado neste teste: O grupo deve permitir mais de uma linha quando a largura não for suficiente.

Se não acontecer

Não force uma altura fixa no grupo para manter a aparência anterior. A segunda linha também precisa de espaço.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Organize as ações numa coluna.
2. Volte à linha e dobre o espaço entre itens.
3. Teste uma ação com texto longo numa janela estreita.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Use flex-direction: column em .acoes.

2. Remova a direção em coluna e ajuste gap: 1.5rem.

3. Mantenha flex-wrap: wrap. Uma nova linha é um resultado válido; confirme ausência de sobreposição e ordem de teclado.

Quando seguir

Você reconhece recipiente e itens e permite que o grupo cresça em novas linhas. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

Referência do exemplo 07-flexbox, reproduzida aqui para que você possa conferir sem sair da página.

app.js

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}

custom.css

/* Personalizações do Caderno CSS. Preserve simple.css. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pular {
  position: absolute;
  left: -10000px;
}
.pular:focus {
  position: static;
}

/* Capítulo 01 */
h1 { font-style: italic; }

/* Capítulo 02 */
.nota { border-left: 4px solid var(--accent); padding-left: 1rem; }
.apresentacao { font-weight: normal; }
.apresentacao { font-weight: bold; }

/* Capítulo 03 */
.apresentacao { line-height: 1.7; font-size: 1.1rem; }
.nota { padding: 1rem; margin-block: 2rem; width: 30rem; max-width: 100%; }

/* Capítulo 04 */

/* Capítulo 05 */
.tabela-rolavel { overflow-x: auto; }

/* Capítulo 06 */
form { max-width: 32rem; }
.campo { margin-block: 1.5rem; }

/* Capítulo 07 */
.acoes { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }