Mundo Tech Software SchoolMTSS
0x40Lição 5 de 9

Organize itens com Flexbox

Alinhe itens e distribua espaço em layouts lineares.

15 min Questionário com 5 perguntas 1 exercício de código
Ao final desta lição, você saberá
  • Criar container flex e alinhar itens com gap.

Flexbox organiza filhos em eixo principal. O container define alinhamento, direção e espaçamento.

menu.css
1.menu {
2  display: flex;
3  align-items: center;
4  justify-content: space-between;
5  gap: 16px;
6}
Saída
Items line up in a row with space between them

justify-content atua no eixo principal; align-items no eixo transversal.

Principais conclusões

  • Criar container flex e alinhar itens com gap.

  • Prefira regras simples e reutilizáveis.

  • Padronize tokens e estados para facilitar evolução visual.

Quiz da aula

5 perguntas · aprovação com 4 acertos · até 50 XP

Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.

Pratique: escreva código em CSS

Estilize a página de exemplo, veja as mudanças na prévia isolada e execute verificações nos estilos calculados.

Exercício 1

Alinhe o menu em linha

+25 XP

Torne .menu um container flex, alinhe itens ao centro e deixe 16px entre itens.

  • Layout do menu
styles.css
Carregando editor…
Prévia da página com estilos

Seu CSS é aplicado a uma página de exemplo em uma prévia isolada. Os testes verificam os estilos calculados.

Dúvidas sobre esta lição

Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.

Carregando publicações…