Layout de Dados Responsivo | Tutorial Flexbox CSS

Introdução

Neste projeto, você aprenderá como criar um layout de dados responsivo usando Flexbox CSS. O objetivo é organizar um conjunto de dados com diferentes padrões de pontos, seguindo requisitos de layout específicos.

👀 Pré-visualização

responsive dice layout preview

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a estrutura básica do layout de dados usando HTML e CSS
Como usar propriedades Flexbox como justify-content, align-items, flex-direction e align-self para posicionar os pontos dentro de cada dado
Como implementar técnicas avançadas de Flexbox como flex-wrap e flex-basis para criar o layout desejado

🏆 Conquistas

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

Usar Flexbox para criar layouts complexos e responsivos
Compreender as diferentes propriedades do Flexbox e como aplicá-las efetivamente
Desenvolver habilidades de resolução de problemas, seguindo instruções passo a passo e implementando o layout exigido

Layout Dado 1

Para começar, abra o editor. Você deve ver um arquivo — index.html no seu editor.

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

unfinished dice layout preview

Nesta etapa, você usará as propriedades justify-content e align-items para posicionar os pontos dentro do primeiro dado.

Abra o arquivo index.html no seu editor de código.
Na seção <style>, adicione as seguintes regras para a classe .div1:

.div1 {
  justify-content: center;
  align-items: center;
}

justify-content: center centraliza o ponto horizontalmente, e align-items: center centraliza-o verticalmente.

Layout Dado 2

Nesta etapa, você usará as propriedades justify-content, flex-direction e align-items para posicionar os pontos dentro do segundo dado.

Na seção <style>, adicione as seguintes regras para a classe .div2:

.div2 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

justify-content: space-around distribui os pontos uniformemente ao longo do eixo principal (horizontalmente), flex-direction: column empilha os pontos verticalmente e align-items: center os centraliza dentro do dado.

Layout Dado 3

Nesta etapa, você usará as propriedades justify-content, align-self e align-items para posicionar os pontos dentro do terceiro dado.

Na seção <style>, adicione as seguintes regras para a classe .div3:

.div3 {
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.div3 p:first-child {
  align-self: flex-start;
}

.div3 p:last-child {
  align-self: flex-end;
}

justify-content: space-around distribui os pontos uniformemente ao longo do eixo principal (horizontalmente), align-items: center os centraliza verticalmente, e padding: 10px adiciona algum espaçamento ao redor do dado.

A propriedade align-self é usada para posicionar os primeiros e últimos pontos na parte superior e inferior do dado, respectivamente.

Layout Dados 4, 5, 6, 7 e 9

Nesta etapa, você usará as propriedades justify-content, align-self, flex-direction e align-items para posicionar os pontos dentro dos dados restantes.

Na seção <style>, adicione as seguintes regras para a classe .div4:

.div4 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.div4 div {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.div4 p {
  align-self: center;
}

Os elementos <div> internos são usados para agrupar os pontos horizontalmente, com justify-content: space-around distribuindo-os uniformemente. A propriedade align-self: center é usada para centralizar os pontos individuais dentro de suas respectivas linhas.

Layout Dado 8

Nesta etapa final, você usará as propriedades justify-content, align-self, flex-wrap e flex-basis para posicionar os pontos dentro do oitavo dado.

Na seção <style>, adicione as seguintes regras para a classe .div8:

.div8 {
  flex-wrap: wrap;
  padding: 2px;
}

.div8 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

A propriedade flex-wrap: wrap permite que os pontos se ajustem para a próxima linha se não couberem em uma única linha. O padding: 2px adiciona algum espaçamento ao redor do dado.

Os elementos <div> internos são usados para agrupar os pontos horizontalmente, com justify-content: space-between distribuindo-os uniformemente e align-items: center centralizando-os verticalmente. O flex-basis: 100% garante que cada linha ocupe toda a largura do dado.

Seguindo estas etapas, você implementou com sucesso o Layout Flex Dice de acordo com os requisitos.