CSS e desenho de interfaces · Lição 07 / 12

Flexbox: distribuir em uma direção

Uma navegação pode crescer sem espremer seus links em uma linha impossível.

Vamos descobrir juntos

1
Display:flex transforma os filhos diretos em itens flexíveis. Flex-direction:row organiza no eixo principal horizontal em nosso documento de escrita horizontal; column muda o eixo. Justify-content atua no eixo principal e align-items no transversal.
2
Flex-wrap:wrap permite novas linhas quando falta espaço; o padrão nowrap não garante que o conteúdo caiba. Gap cria separação entre os itens. Teste palavras longas e traduções, não apenas três rótulos curtos.
3
No exemplo, .nav é o contêiner. Compare justify-content:flex-start e space-between nas duas larguras. Alinhamento depende do espaço disponível; distribuir espaço não substitui padding ou uma área de interação confortável.
4
Evite usar order ou row-reverse só para reorganizar significado. A ordem visual pode divergir da leitura e do teclado. Corrija a ordem do HTML quando o conteúdo precisar realmente de outra sequência.

Oficina: uma interface, diferentes espaços

Edite o bloco <style id="lesson-css"> em “Meus arquivos e GitHub”. A prévia aplica esse CSS à estrutura HTML fornecida; confira alterações de HTML no arquivo baixado. Recursos externos e CSS fora do conjunto de estudo não são aceitos aqui.

Ir ao meu códigoLargura do documento de prévia

As medidas descrevem esta prévia, não garantem todos os tamanhos ou a acessibilidade completa. Teste conteúdo longo, zoom, teclado e tecnologias assistivas no projeto local.

Laboratório de contraste entre duas cores

Cor do textoCor do fundo

Razão aproximada ·

Cálculo apenas para duas cores sRGB opacas escolhidas aqui; não lê sua página. O limiar usa a razão sem arredondar. Não avalia transparência, gradientes, imagens, estados ou conformidade completa.

O código mudou. Aplique novamente para observar esta versão.CSS aplicado. Compare as medidas e teste o teclado dentro da prévia.Não foi possível aplicar. Mantenha um único style com id lesson-css, até 65.536 caracteres no documento e use o CSS ensinado, sem URLs, imports, escapes ou regras externas. Propriedades inválidas podem ser ignoradas pelo navegador; isto não é um validador completo.Página de estudo com seu CSSSimNãoMovimento reduzidoSem preferência por reduçãoO par atinge 4,5:1 para texto comum.O par fica abaixo de 4,5:1 para texto comum.<a href="#conteudo">Pular para o conteúdo</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p> <nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article> <article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section> <section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main> <footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>

Links oficiais e próximo passo

Referência para investigar

✦

SUA MISSÃO

Usar Flexbox com quebra, espaçamento e alinhamento.

Leve com você

Adicione um rótulo longo no arquivo local, teste quebra e Tab. Registre uma configuração que preserva leitura e sequência.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Oficina de ideias: uma interface que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
.nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
</style></head><body>
<a href="#conteudo">Pular para o conteúdo</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p>
<nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article>
<article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section>
<section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main>
<footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>
</body></html>

Formato do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.

Flexbox: distribuir em uma direção

Vamos descobrir juntos

Oficina: uma interface, diferentes espaços

Medidas observadas na prévia

Laboratório de contraste entre duas cores

Links oficiais e próximo passo

Agora é a sua vez

Preveja, altere, compare

Leve com você

Meus arquivos e GitHub

Seu arquivo desta lição

Guardar no meu GitHub

Rullstpetbot