Diseño de dados responsivo con Flexbox

Introducción

En este proyecto, aprenderás a crear un diseño de dados responsivo utilizando Flexbox CSS. El objetivo es organizar un conjunto de dados con diferentes patrones de puntos, siguiendo requisitos de diseño específicos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la estructura básica del diseño de dados utilizando HTML y CSS
• Cómo utilizar propiedades de Flexbox como justify-content, align-items, flex-direction y align-self para posicionar los puntos dentro de cada dado
• Cómo implementar técnicas avanzadas de Flexbox como flex-wrap y flex-basis para crear el diseño deseado

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar Flexbox para crear diseños complejos y responsivos
• Comprender las diferentes propiedades de Flexbox y cómo aplicarlas efectivamente
• Desarrollar habilidades para resolver problemas siguiendo instrucciones paso a paso e implementando el diseño requerido

Diseño de dados 1

Para comenzar, abre el editor. Deberías ver un archivo — index.html en tu editor.

Haz clic en "Go Live" en la esquina inferior derecha para abrir el puerto 8080 y previsualizar la página index.html en el navegador, el efecto será el siguiente:

En este paso, utilizarás las propiedades justify-content y align-items para posicionar los puntos dentro del primer dado.

1. Abre el archivo index.html en tu editor de código.
2. En la sección <style>, agrega las siguientes reglas para la clase .div1:

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

justify-content: center centra el punto horizontalmente, y align-items: center lo centra verticalmente.

Diseño de dados 2

En este paso, utilizarás las propiedades justify-content, flex-direction y align-items para posicionar los puntos dentro del segundo dado.

1. En la sección <style>, agrega las siguientes reglas para la clase .div2:

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

justify-content: space-around distribuye los puntos equitativamente a lo largo del eje principal (horizontalmente), flex-direction: column apila los puntos verticalmente y align-items: center los centra dentro del dado.

Diseño de dados 3

En este paso, utilizarás las propiedades justify-content, align-self y align-items para posicionar los puntos dentro del tercer dado.

1. En la sección <style>, agrega las siguientes reglas para la clase .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 distribuye los puntos equitativamente a lo largo del eje principal (horizontalmente), align-items: center los centra verticalmente y padding: 10px agrega un poco de espacio alrededor del dado.

La propiedad align-self se utiliza para posicionar el primer y el último punto en la parte superior y la parte inferior del dado, respectivamente.

Diseño de dados 4, 5, 6, 7 y 9

En este paso, utilizarás las propiedades justify-content, align-self, flex-direction y align-items para posicionar los puntos dentro de los dados restantes.

1. En la sección <style>, agrega las siguientes reglas para la clase .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;
}

justify-content: space-around distribuye los puntos equitativamente a lo largo del eje principal (horizontalmente), flex-direction: column apila los puntos verticalmente y align-items: center los centra dentro del dado.

Los elementos <div> internos se utilizan para agrupar los puntos horizontalmente, con justify-content: space-around distribuyéndolos equitativamente. La propiedad align-self: center se utiliza para centrar los puntos individuales dentro de sus respectivas filas.

Diseño de dados 8

En este último paso, utilizarás las propiedades justify-content, align-self, flex-wrap y flex-basis para posicionar los puntos dentro del octavo dado.

1. En la sección <style>, agrega las siguientes reglas para la clase .div8:

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

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

La propiedad flex-wrap: wrap permite que los puntos se desplace a la siguiente línea si no caben en una sola línea. El padding: 2px agrega un poco de espacio alrededor del dado.

Los elementos <div> internos se utilizan para agrupar los puntos horizontalmente, con justify-content: space-between distribuyéndolos equitativamente y align-items: center centrándolos verticalmente. El flex-basis: 100% asegura que cada fila ocupe el ancho total del dado.

Siguiendo estos pasos, has implementado con éxito el diseño de dados Flex según los requisitos.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.