Aula 8 - Desenvolvimento Web

Desenvolvimento Web

Aula 8 - Flexbox, o último recurso do CSS. (Mentira, ainda tem o Grid! Porém...)
Professor: Lucas Sbaraini

Introdução ao Flexbox

Flexbox (Flexible Box Layout) é um modelo de layout do CSS3 que facilita o alinhamento, espaçamento e distribuição de itens dentro de um contêiner.
Ideal para criar interfaces responsivas e alinhadas automaticamente, sem a complexidade do float ou inline-block.

Eixos no Flexbox

• Eixo Principal (Main Axis): horizontal (esquerda → direita) por padrão.

• Eixo Cruzado (Cross Axis): vertical (de cima para baixo).

🔧 Com a propriedade flex-direction, você pode inverter ou mudar os eixos:

Propriedades do Contêiner Flex

As principais propriedades aplicadas ao contêiner (pai) são:

Propriedades dos Itens Flexíveis

As propriedades aplicadas aos itens filhos controlam como eles crescem, encolhem e se posicionam:

Propriedade
Justify-content

Propriedade
Align-items

Alinha os itens de acordo com o eixo secundário

Multiple Choice

Qual propriedade alinha os itens no eixo principal?

• align-items

• justify-content

• flex-wrap

• align-content

Visão de quem faz programa...

Vamos analisar a imagem, e tentar recriar: