Arranjo de Frutas com CSS Flexbox

Introdução

Neste projeto, você aprenderá como usar CSS Flexbox para criar um layout de arranjo de frutas. Você aprenderá como usar as propriedades align-self e order para posicionar e organizar as frutas nas tigelas.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a estrutura HTML para o arranjo de frutas
• Como usar a propriedade align-self para alinhar itens flexíveis individuais ao longo do eixo transversal
• Como usar a propriedade order para alterar a ordem dos itens flexíveis
• Como organizar as frutas no layout desejado usando Flexbox

🏆 Conquistas

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

• Usar CSS Flexbox para criar um layout responsivo e visualmente atraente
• Aplicar as propriedades align-self e order para controlar o posicionamento e a organização dos elementos
• Trabalhar com seletores e propriedades CSS para alcançar o design desejado

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 a pasta 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.

Estilizar o Arranjo de Frutas

Nesta etapa, você aprenderá como usar as propriedades align-self e order para estilizar o arranjo de frutas. Siga os passos abaixo para completar esta etapa:

1. Abra o arquivo index.css no seu editor.
2. Direcione a classe .yellow e defina a propriedade align-self como flex-end.
3. Defina a propriedade order da classe .yellow como 1.

Seu arquivo index.css agora deve se parecer com isto:

.yellow {
  align-self: flex-end;
  order: 1;
}

A propriedade align-self é usada para alinhar os itens flexíveis individuais ao longo do eixo transversal, substituindo o valor de align-items. Neste caso, definimos como flex-end para alinhar a fruta amarela na parte inferior da tigela.

A propriedade order é usada para alterar a ordem dos itens flexíveis. Definimos como 1 para a fruta amarela, o que a colocará no final do container flexível.

O resultado final é o seguinte:

Resumo

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