CSS Fundamentos

Box Model · Posicionamento · Display · Flexbox

Todo elemento HTML é tratado pelo browser como uma caixa retangular. Este material cobre os quatro pilares do layout em CSS clássico: a base necessária antes de partir para Grid ou frameworks utilitários.

Aula anterior: Aula 02: Propriedades CSS

1. Box Model

Todo elemento HTML é composto por quatro camadas concêntricas:

margin

border

padding

content

Camada	Descrição	Propriedade CSS
`content`	Área do conteúdo (texto, imagem…)	`width` / `height`
`padding`	Espaço interno entre o conteúdo e a borda	`padding`
`border`	Linha ao redor do padding	`border`
`margin`	Espaço externo entre o elemento e os vizinhos	`margin`

box-sizing

Por padrão, width e height se referem apenas ao content. Usando box-sizing: border-box, padding e border são incluídos na dimensão declarada: comportamento muito mais previsível.

css

/* Boa prática global */
*, *::before, *::after {
  box-sizing: border-box;
}

.caixa {
  width: 200px;     /* largura TOTAL inclui padding e border */
  padding: 20px;
  border: 2px solid #333;
  margin: 16px;
}

Demonstração

content-box

width: 200px
+ padding: 20px
+ border: 4px
= 248px no layout

border-box

width: 200px
padding e border
já estão incluídos
= 200px no layout

Dica

Sempre use box-sizing: border-box globalmente. Isso evita surpresas de tamanho ao adicionar padding ou border.

Ver exemplos interativos de Box Model →

2. Posicionamento

A propriedade position controla como um elemento é colocado no documento. As propriedades de deslocamento (top, right, bottom, left) só funcionam em elementos posicionados (qualquer valor diferente de static).

Valor	Referência	Fluxo do documento
`static`	Padrão. Segue o fluxo normal.	Permanece no fluxo
`relative`	Deslocado em relação à sua posição original.	Permanece no fluxo (ocupa espaço original)
`absolute`	Posicionado em relação ao ancestral posicionado mais próximo.	Removido do fluxo
`fixed`	Posicionado em relação à viewport. Não se move ao rolar.	Removido do fluxo
`sticky`	Relativo até atingir um limiar de scroll; então age como fixed.	Permanece no fluxo

Exemplos de código

css

/* relative: desloca sem tirar do fluxo */
.destaque {
  position: relative;
  top: 10px;
  left: 20px;
}

/* absolute: dentro de um pai com position: relative */
.container { position: relative; }

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* fixed: barra de navegação sempre visível */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* sticky: cabeçalho que gruda no topo ao rolar */
.section-header {
  position: sticky;
  top: 0;
  background: #fff;
}

Demonstração visual

static

relative
top:10 left:20

static

absolute
top:0 right:0

z-index

Quando elementos se sobrepõem, z-index define a ordem no eixo Z. Valores maiores ficam na frente. Só funciona em elementos posicionados.

css

.fundo  { position: absolute; z-index: 1; }
.frente { position: absolute; z-index: 10; } /* fica sobre .fundo */

Ver exemplos interativos de Posicionamento →

3. Display

A propriedade display define o modelo de formatação do elemento. É a propriedade CSS mais importante para controle de layout.

Valor	Comportamento	Exemplos de elementos
`block`	Ocupa toda a largura disponível. Começa em nova linha.	`div`, `p`, `h1`–`h6`
`inline`	Ocupa só o espaço do conteúdo. Não aceita width/height.	`span`, `a`, `strong`
`inline-block`	Inline no fluxo, mas aceita width/height/margin vertical.	Botões, ícones
`none`	Remove o elemento do fluxo e da renderização.	Elementos ocultos
`flex`	Ativa o Flexbox no container. Filhos tornam-se flex items.	Layouts 1D
`grid`	Ativa o Grid Layout no container.	Layouts 2D

Demonstração

blockinlineinlineinlineinline-block
(200px)inline-block
(200px)

Ver exemplos interativos de Display →

4. Flexbox

O Flexible Box Layout (Flexbox) é um modelo de layout unidimensional: trabalha em uma direção por vez (linha ou coluna). É ideal para alinhar, distribuir espaço e reordenar itens em um container, sem depender de floats ou posicionamento absoluto.

← eixo principal (main axis) →

↑
eixo
cruzado
(cross axis)
↓

4.1 Propriedades do Container (`display: flex`)

Para ativar o Flexbox, aplique display: flex (ou inline-flex) no elemento pai. Todos os filhos diretos tornam-se flex items.

`flex-direction`

Define a direção do eixo principal.

css

.container {
  display: flex;
  flex-direction: row;            /* padrão: esquerda → direita */
  /* flex-direction: row-reverse; */    /* direita → esquerda */
  /* flex-direction: column; */         /* cima → baixo */
  /* flex-direction: column-reverse; */ /* baixo → cima */
}

row

row-reverse

column

column-reverse

`flex-wrap`

Define se os itens podem quebrar para uma nova linha quando não há espaço suficiente.

css

.container {
  display: flex;
  flex-wrap: nowrap;       /* padrão: não quebra, comprime itens */
  flex-wrap: wrap;         /* quebra para a próxima linha */
  flex-wrap: wrap-reverse; /* quebra de baixo para cima */
}

nowrap (comprime)

Item 1

Item 2

Item 3

Item 4

Item 5

wrap

Item 1

Item 2

Item 3

Item 4

Item 5

`justify-content`

Distribui os itens ao longo do eixo principal.

css

.container {
  display: flex;
  justify-content: flex-start;     /* padrão */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between;  /* espaço entre (sem nas bordas) */
  justify-content: space-around;   /* espaço ao redor de cada item */
  justify-content: space-evenly;   /* espaços iguais em todos os lados */
}

flex-start

flex-end

center

space-between

space-around

space-evenly

`align-items`

Alinha os itens ao longo do eixo cruzado (perpendicular ao principal).

css

.container {
  display: flex;
  align-items: stretch;     /* padrão: estica para preencher */
  align-items: flex-start;  /* topo do container */
  align-items: flex-end;    /* fundo do container */
  align-items: center;      /* centralizado verticalmente */
  align-items: baseline;    /* alinha pela linha de base do texto */
}

flex-start

center

flex-end

stretch

`align-content`

Alinha as linhas quando há múltiplas linhas (só tem efeito com flex-wrap: wrap).

css

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-content: center;
  align-content: flex-end;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;   /* padrão */
}

`gap`

Espaçamento entre os itens (substitui a necessidade de margin). Aceita dois valores: gap: row-gap column-gap.

css

.container {
  display: flex;
  gap: 16px;         /* mesmo gap em linha e coluna */
  gap: 10px 24px;    /* row-gap column-gap */
  row-gap: 10px;
  column-gap: 24px;
}

gap: 8px

gap: 24px

4.2 Propriedades dos Itens

`flex-grow`

Define a capacidade de um item crescer para ocupar o espaço restante. O valor é uma proporção: um item com flex-grow: 2 cresce o dobro de um com flex-grow: 1.

css

.item-a { flex-grow: 1; } /* ocupa 1 parte do espaço livre */
.item-b { flex-grow: 2; } /* ocupa 2 partes do espaço livre */
.item-c { flex-grow: 1; } /* ocupa 1 parte do espaço livre */

grow: 1

grow: 2

grow: 1

`flex-shrink`

Define a capacidade de um item encolher quando o espaço é insuficiente. Padrão: 1. Com 0, o item não encolhe.

css

.item { flex-shrink: 1; } /* padrão: encolhe proporcionalmente */
.item { flex-shrink: 0; } /* não encolhe */

`flex-basis`

Define o tamanho inicial de um item antes de o espaço livre ser distribuído. Pode ser um valor absoluto, percentual ou auto (padrão, usa width/height).

css

.item { flex-basis: auto; }   /* usa o tamanho do conteúdo */
.item { flex-basis: 200px; }  /* tamanho base de 200px */
.item { flex-basis: 30%; }    /* 30% do container */

`flex`: shorthand

Combina flex-grow, flex-shrink e flex-basis. Prefira sempre o shorthand.

css

/* flex: grow shrink basis */
.item { flex: 1; }          /* flex: 1 1 0: cresce e encolhe livremente */
.item { flex: auto; }       /* flex: 1 1 auto */
.item { flex: none; }       /* flex: 0 0 auto: tamanho fixo */
.item { flex: 0 1 200px; }  /* não cresce, pode encolher, base 200px */

`align-self`

Sobrescreve o align-items do container para um item específico.

css

.container { display: flex; align-items: center; }

.item-especial {
  align-self: flex-end; /* vai para o fundo, ignorando o center do container */
}

normal

flex-start

flex-end

stretch

`order`

Controla a ordem visual dos itens sem alterar o HTML. Padrão: 0. Itens com valor menor aparecem primeiro.

css

.item-1 { order: 3; } /* aparece por último */
.item-2 { order: 1; } /* aparece primeiro */
.item-3 { order: 2; } /* aparece segundo */

HTML: 1
order: 3

HTML: 2
order: 1

HTML: 3
order: 2

4.3 Exemplos Práticos

Centralização perfeita (horizontal + vertical)

O truque mais famoso do Flexbox, antes muito difícil sem hacks.

css

.centralizado {
  display: flex;
  justify-content: center; /* eixo principal */
  align-items: center;     /* eixo cruzado */
  height: 200px;
}

Centralizado!

Barra de navegação

css

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-logo { font-weight: bold; }

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

Grid de Cards responsivo

css

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 250px; /* cresce, pode encolher, base 250px */
  padding: 16px;
  border-radius: 8px;
  background: #f5f5f5;
}

Card A

Conteúdo do card A

Card B

Conteúdo do card B

Card C

Conteúdo do card C

Layout de página com sidebar

css

.pagina {
  display: flex;
  gap: 24px;
  min-height: 400px;
}

.sidebar {
  flex: 0 0 220px; /* largura fixa, não cresce nem encolhe */
}

.conteudo-principal {
  flex: 1; /* ocupa todo o espaço restante */
}

Resumo de todas as propriedades

Propriedades do Container

Propriedade	Valores principais	Padrão
`flex-direction`	row, row-reverse, column, column-reverse	row
`flex-wrap`	nowrap, wrap, wrap-reverse	nowrap
`flex-flow`	shorthand: direction + wrap	row nowrap
`justify-content`	flex-start, flex-end, center, space-between, space-around, space-evenly	flex-start
`align-items`	stretch, flex-start, flex-end, center, baseline	stretch
`align-content`	flex-start, flex-end, center, space-between, space-around, stretch	stretch
`gap`	valor / row-gap column-gap	0

Propriedades dos Itens

Propriedade	Valores principais	Padrão
`flex-grow`	número (proporção)	0
`flex-shrink`	número (proporção)	1
`flex-basis`	auto, tamanho, %	auto
`flex`	grow shrink basis (shorthand)	0 1 auto
`align-self`	auto, flex-start, flex-end, center, stretch, baseline	auto
`order`	número inteiro	0

Ver exemplos interativos de Flexbox →

5. Exercícios

Box Model: Crie um <div> com width: 300px, padding: 20px, border: 3px solid red e margin: 40px. Compare o tamanho final usando box-sizing: content-box versus border-box. Use as DevTools do browser (F12) para inspecionar.
Posicionamento: Crie um card com imagem e um badge "NOVO" no canto superior direito. Use position: relative no card e position: absolute no badge.
Display: Transforme uma lista <ul> horizontal usando display: inline nos <li>. Depois mude para inline-block e adicione padding e width. Observe a diferença.
Flexbox: Navbar: Crie uma barra de navegação com logo à esquerda, links no centro e um botão "Login" à direita usando apenas Flexbox.
Flexbox: Layout completo: Monte um layout de página completo com: header, navbar horizontal, área principal (sidebar + conteúdo), e footer. Use somente Flexbox para o posicionamento.
Flexbox: Grid de cards responsivo: Crie 6 cards com flex: 1 1 200px e flex-wrap: wrap. Observe como eles se reorganizam ao redimensionar a janela.

CSS Fundamentos ​

1. Box Model ​

box-sizing ​

Demonstração ​

2. Posicionamento ​

Exemplos de código ​

Demonstração visual ​

z-index ​

3. Display ​

Demonstração ​

4. Flexbox ​

4.1 Propriedades do Container (display: flex) ​

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

4.2 Propriedades dos Itens ​

flex-grow

flex-shrink

flex-basis

flex: shorthand

align-self

order

4.3 Exemplos Práticos ​

Centralização perfeita (horizontal + vertical)

Barra de navegação

Grid de Cards responsivo

Layout de página com sidebar

Resumo de todas as propriedades ​

5. Exercícios ​

CSS Fundamentos

1. Box Model

box-sizing

Demonstração

2. Posicionamento

Exemplos de código

Demonstração visual

z-index

3. Display

Demonstração

4. Flexbox

4.1 Propriedades do Container (`display: flex`)

`flex-direction`

`flex-wrap`

`justify-content`

`align-items`

`align-content`

`gap`

4.2 Propriedades dos Itens

`flex-grow`

`flex-shrink`

`flex-basis`

`flex`: shorthand

`align-self`

`order`

4.3 Exemplos Práticos

Resumo de todas as propriedades

5. Exercícios