Crie uma Travessa de Frutas Visualmente Atraente com CSS Flexbox

Introdução

Neste projeto, você aprenderá como criar uma travessa de frutas visualmente atraente usando CSS Flexbox. O objetivo é posicionar as frutas da mesma cor no meio de suas respectivas placas de cor, criando uma exibição harmoniosa e esteticamente agradável.

👀 Visualização

Layout final da travessa de frutas

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar um container flex para organizar as frutas na travessa
Como posicionar as frutas da mesma cor no meio de suas respectivas placas de cor

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar CSS Flexbox para criar um layout semelhante a uma grade
Centralizar e alinhar elementos dentro de um container flex
Organizar e apresentar elementos em uma página web de forma eficaz e visualmente atraente

Configurar a Estrutura do Projeto

Nesta etapa, você aprenderá como configurar a estrutura do projeto.

Para começar, abra o editor. Você deve ver alguns arquivos — index.html, style.css e images no seu editor.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Visualização da estrutura do projeto inacabado

Configurar o Container Flex

Nesta etapa, você aprenderá como configurar o container flex para organizar as frutas na travessa.

Abra o arquivo index.css no seu editor de código.
Dentro do seletor #pond, adicione as seguintes propriedades CSS:

#pond {
  /* TODO: Adicione seu código CSS aqui */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

A propriedade display: flex define o elemento #pond como um container flex, permitindo que usemos o layout flexbox para posicionar as frutas.

A propriedade flex-direction: column empilha os itens flex (os containers de frutas) verticalmente.

A propriedade flex-wrap: wrap permite que os itens flex se ajustem para a próxima linha se não couberem na linha atual.

O resultado final é o seguinte:

Resultado final do container flex

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.