projeto em CSS Skill Tree

Arranjo de Frutas com CSS Flexbox

Iniciante

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.

cssweb-development

💡 Este tutorial foi traduzido do inglês com assistência de IA. Para ver o original, você pode mudar para a versão em inglês

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

Layout final do arranjo de frutas

🎯 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

Professor

labby
Labby
Labby is the LabEx teacher.