Módulo 2 / HTML & CSS

Flexbox

Layouts flexíveis de forma simples e poderosa.

school Aula 07 schedule 2 horas

Conceito

O que é Flexbox?

view_quilt Flexible Box Layout

▸ Modelo de layout unidimensional
▸ Distribui espaço entre itens de um contêiner
▸ Alinha itens de forma simples e previsível
▸ Funciona em linha ou coluna

code Ativar o Flexbox

.container {
  display: flex;
}

Resultado:

1

2

3

lightbulb Basta um display: flex no pai e os filhos se alinham automaticamente!

Eixo principal

flex-direction

row (padrão)

1

2

3

flex-direction: row;

row-reverse

1

2

3

flex-direction: row-reverse;

column

1

2

3

flex-direction: column;

column-reverse

1

2

3

flex-direction: column-reverse;

Eixo principal

justify-content

flex-start (padrão)

A

B

C

center

A

B

C

flex-end

A

B

C

space-between

A

B

C

space-around

A

B

C

space-evenly

A

B

C

Eixo cruzado

align-items

stretch (padrão)

A

B

C

flex-start

A

B

C

center

A

B

C

flex-end

A

B

C

baseline

A

B

C

Dica de ouro

Centralização perfeita

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

lightbulb Apenas 3 linhas para centralizar qualquer elemento nos dois eixos!

Centralizado!

Espaçamento

Gap e flex-wrap

space_bar gap

.container {
  display: flex;
  gap: 16px;          /* ambos os eixos */
  gap: 16px 24px;     /* linha | coluna */
  row-gap: 16px;      /* só linhas */
  column-gap: 24px;   /* só colunas */
}

Substitui o uso de margin entre itens. Mais limpo e previsível.

wrap_text flex-wrap

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Itens quebram para a linha seguinte:

1

2

3

4

5

6

Filhos flex

Propriedades dos itens

flex-grow

0

1

2

/* Quanto cada item cresce */
.item-a { flex-grow: 0; } /* não cresce */
.item-b { flex-grow: 1; } /* 1 parte */
.item-c { flex-grow: 2; } /* 2 partes */

flex-shrink

/* Quanto cada item encolhe */
.item { flex-shrink: 1; } /* encolhe (padrão) */
.fixo { flex-shrink: 0; } /* não encolhe */

flex-basis

/* Tamanho inicial antes de crescer/encolher */
.item { flex-basis: 200px; }
.item { flex-basis: auto; }  /* padrão */

star Atalho: flex

/* flex: grow shrink basis */
.item { flex: 1; }           /* flex: 1 1 0% */
.item { flex: 0 0 200px; }  /* fixo em 200px */
.item { flex: 2 1 auto; }  /* cresce 2x */

Individual

align-self e order

align-self

A

B

C

D

/* Sobrescreve align-items para um item */
.item-b { align-self: center; }
.item-d { align-self: flex-end; }

order

1 (order:3)

2 (order:1)

3 (order:2)

/* Reordena visualmente sem mudar o HTML */
.item-1 { order: 3; }
.item-2 { order: 1; }
.item-3 { order: 2; }

Mundo real

Layouts comuns

Navbar

Logo

Home

Sobre

Contato

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Cards em grade

Card 1

Card 2

Card 3

Card 4

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 calc(50% - 16px);
}

Sidebar + Conteúdo

Menu

Conteúdo principal

.sidebar { flex: 0 0 250px; }
.main    { flex: 1; }

Footer com rodapé fixo

Corpo

Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main { flex: 1; }

Mão na massa

Exercício prático

edit_note Layout com Flexbox

Crie uma navbar com logo a esquerda e links a direita usando space-between
Monte uma seção de cards com flex-wrap e gap
Centralize um hero section com justify-content: center e align-items: center
Crie um layout sidebar + conteúdo com flex: 0 0 250px e flex: 1
Garanta que o footer fique no final com flex-direction: column e min-height: 100vh

star Bônus: pratique no Flexbox Froggy!

Próxima aula

Aula 08

CSS Grid: layouts avançados.

task_alt O que aprendemos hoje

check_circle display: flex e flex-direction
check_circle justify-content e align-items
check_circle gap e flex-wrap
check_circle flex-grow, flex-shrink, flex-basis
check_circle Layouts reais: navbar, cards, sidebar, footer

Próxima aula

auto_stories Referência: CSS-Tricks: A Guide to Flexbox