Aula 11 — Display e o fluxo do documento

Antes de usar Flexbox ou Grid, é essencial entender como o navegador organiza os elementos naturalmente.

Esse comportamento padrão é chamado de fluxo do documento, e ele depende diretamente da propriedade display.

O que é o fluxo do documento?

O fluxo do documento é a forma padrão como o navegador posiciona os elementos HTML na página.

Sem nenhum CSS especial:

• Elementos aparecem na ordem do HTML
• Um após o outro
• Respeitando o tipo de display de cada elemento

A propriedade display

A propriedade display define como um elemento se comporta em relação aos outros elementos.

Os valores mais importantes para começar são:

• block
• inline
• inline-block
• none

Display block

Elementos com display: block:

• Ocupam toda a largura disponível
• Quebram a linha
• Aceitam width, height, margin e padding

 div { display: block; } 

Exemplos comuns:

• <div>
• <p>
• <section>

Display inline

Elementos com display: inline:

• Não quebram a linha
• Ocupam apenas o espaço do conteúdo
• Ignoram width e height

 span { display: inline; } 

Exemplos comuns:

• <span>
• <a>
• <strong>

Display inline-block

O inline-block é uma mistura dos dois mundos:

• Fica na mesma linha (como inline)
• Aceita width, height e padding (como block)

 .button { display: inline-block; padding: 10px 20px; } 

Foi muito usado antes do Flexbox.

Display none

Com display: none, o elemento:

• Não aparece
• Não ocupa espaço
• Some do fluxo do documento

 .oculto { display: none; } 

Fluxo normal × quebra de fluxo

Enquanto os elementos seguem o fluxo normal:

• A página se organiza sozinha
• O layout é previsível

Quando alteramos display ou posição:

• O fluxo muda
• O layout pode quebrar

Na próxima aula, vamos falar sobre position — como posicionar elementos fora do fluxo normal 📍✨