Design de Layout de Vegetais com Flexbox

Introdução

Neste projeto, você aprenderá a usar as propriedades CSS do Flexbox para organizar um layout de vegetais frescos em um design específico. Ao final deste projeto, você será capaz de criar um layout visualmente atraente usando o Flexbox, que é uma ferramenta poderosa para criar designs web responsivos e dinâmicos.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o layout usando as propriedades CSS do Flexbox
• Como organizar os vegetais nas posições desejadas dentro do layout
• Como usar propriedades do Flexbox como display, justify-content, align-items e align-self para alcançar o layout desejado

🏆 Conquistas

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

• Criar um layout visualmente atraente usando o Flexbox, uma ferramenta poderosa para criar designs web responsivos e dinâmicos
• Entender como usar as propriedades CSS do Flexbox para criar um layout flexível e responsivo
• Aplicar técnicas para alinhar e distribuir elementos dentro de um container Flexbox
• Implementar estratégias para posicionar elementos dentro de um layout Flexbox para alcançar um design específico

Configurar o Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

1. Abra a pasta do projeto, que contém os seguintes arquivos e diretórios:

   • css/style.css
   • index.html

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

3. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Configurar o Layout

Nesta etapa, você aprenderá a usar as propriedades CSS do Flexbox para configurar o layout para a disposição dos vegetais.

1. Abra o arquivo style.css no seu editor.

2. Dentro do seletor #box1, adicione as seguintes propriedades CSS:

   #box1 {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

   Isso centralizará o conteúdo tanto horizontalmente quanto verticalmente dentro do container #box1.

3. Dentro do seletor #box2, adicione as seguintes propriedades CSS:

   #box2 {
     display: flex;
     justify-content: space-between;
   }
   

   Isso distribuirá os itens no container #box2 uniformemente com espaço entre eles.

4. Dentro do seletor #box2 .item:nth-child(2), adicione a seguinte propriedade CSS:

   #box2 .item:nth-child(2) {
     align-self: flex-end;
   }
   

   Isso alinhará o segundo item em #box2 na parte inferior do container.

Organizar os Vegetais

Nesta etapa, você aprenderá a usar as propriedades CSS do Flexbox para organizar os vegetais nas posições desejadas.

1. Dentro do seletor #box3, adicione as seguintes propriedades CSS:

   #box3 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
   

   Isso criará um layout de linha para os itens em #box3 e os distribuirá uniformemente com espaço entre eles.

2. Dentro do seletor #box3 .item:nth-child(2), adicione a seguinte propriedade CSS:

   #box3 .item:nth-child(2) {
     align-self: center;
   }
   

   Isso alinhará o segundo item em #box3 ao centro do container.

3. Dentro do seletor #box3 .item:nth-child(3), adicione a seguinte propriedade CSS:

   #box3 .item:nth-child(3) {
     align-self: flex-end;
   }
   

   Isso alinhará o terceiro item em #box3 na parte inferior do container.

Após concluir estas etapas, seu arquivo style.css deverá corresponder à solução fornecida, e o layout dos vegetais deverá corresponder ao exemplo finalizado.

O resultado final é o seguinte:

Resumo

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