Layout de Cartão Flexível Responsivo

Introdução

Neste projeto, você aprenderá como criar um layout de cartão flexível usando CSS Flexbox. O layout de cartão flexível é um padrão de design comum usado em páginas web e aplicações, onde o conteúdo é exibido em uma estrutura responsiva e adaptável, semelhante a uma grade.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como selecionar os elementos a serem dispostos como caixas flexíveis
• Como controlar o ajuste (wrapping) de itens flexíveis dentro do contêiner flexível
• Como controlar o posicionamento de itens flexíveis no eixo principal

🏆 Conquistas

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

• Usar CSS Flexbox para criar um layout responsivo e flexível
• Aplicar técnicas para controlar o comportamento de itens flexíveis dentro de um contêiner flexível
• Implementar estratégias para posicionar e distribuir itens flexíveis ao longo do eixo principal

Configurar a Estrutura do Projeto

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

Para começar, abra o editor. Você deve ver dois arquivos — flexible_card.html e flexible_card.css no seu editor.

Clique em "Go Live" no canto inferior direito para abrir a porta 8080 e visualizar a página flexible_card.html no navegador. O efeito será o seguinte:

Configurando Layouts Flexíveis

Nesta etapa, você aprenderá como usar elementos flexíveis para layout a fim de obter o efeito desejado. Por favor, siga os passos abaixo para completar esta etapa:

1. Abra o arquivo flexible_card.css no seu editor.
2. Localize o seletor section no arquivo CSS.
3. Adicione a propriedade display: flex; ao seletor section para transformar o elemento <section> em um contêiner flexível.

O código CSS atualizado deve ser semelhante a este:

section {
  display: flex; /* Torna a seção um contêiner flexível */
  /* Outros estilos */
}

4. Adicione a propriedade flex-wrap: wrap; ao seletor section para permitir que os itens flexíveis se ajustem para a próxima linha, caso não caibam na mesma linha.

O código CSS atualizado deve ser semelhante a este:

section {
  display: flex;
  flex-wrap: wrap; /* Permite que os itens flexíveis se ajustem para a próxima linha */
  /* Outros estilos */
}

5. Adicione a propriedade justify-content: space-between; ao seletor section para distribuir os itens flexíveis uniformemente ao longo do eixo principal, com espaço igual entre eles.

O código CSS atualizado deve ser semelhante a este:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Distribui os itens flexíveis uniformemente ao longo do eixo principal */
  /* Outros estilos */
}

Após concluir estas três etapas, seu arquivo flexible_card.css deve ser semelhante a este:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

Agora, seu layout de cartão flexível deve estar completo e corresponder ao resultado final mostrado no exemplo.

Resumo

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