Desenvolvimento front-end

Exercícios CSS Flexbox

Utilizando o arquivo HTML disponível aqui , reproduza as imagens abaixo, conforme as instruções de cada uma delas.

Essa sequência possui 10 exercícios. O arquivo HTML fornecido não deve ser alterado, sendo que todas as configurações deverão ser feitas apenas no CSS.

Utilize CSS Flexbox para os posicionamentos.

Para acessar o repositório do exercício no GitHub, clique aqui

Exercício #01

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

O espaçamento interno deve ser de 40px.

Exercício #02

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

O espaçamento interno deve ser de 40px.

O espaçamento entre os elementos deve ser de 40px.

Exercício #03

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

O espaçamento interno deve ser de 40px.

O espaçamento entre os elementos deve ser de 40px.

Exercício #04

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

Exercício #05

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

Exercício #06

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

Exercício #07

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

O espaçamento interno deve ser de 40px.

O espaçamento entre os elementos deve ser de 40px.

Exercício #08

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

O espaçamento interno deve ser de 40px.

O espaçamento entre os elementos deve ser de 40px.

Exercício #09

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

O espaçamento interno deve ser de 40px.

O espaçamento entre os elementos deve ser de 40px.

Exercício #10

Utilizando CSS3, reproduza a imagem abaixo com as seguintes características:

O container pai deve ter 400px de largura e 400px de altura.

O espaçamento interno deve ser de 40px.

O espaçamento entre os elementos deve ser de 40px.