Sitio web de Casa de Mascotas Responsivo con Flexbox

Introducción

En la bulliciosa ciudad de Petville, Jordan, un desarrollador web, se le encarga rediseñar el sitio web "Casa de Mascotas".

Este laboratorio crea un diseño adaptable y visualmente atractivo para los dueños de mascotas. El sitio web debe mostrar eficazmente los servicios, información sobre nosotros y datos de contacto en todos los dispositivos. Jordan decide utilizar Flexbox por sus poderosas capacidades de diseño.

Skills Graph

Conceptos básicos de Flexbox y la propiedad display

Para comenzar con Flexbox, es necesario entender sus conceptos básicos.

Imagina que eres un diseñador interior y tu página web es una gran habitación vacía. Tu trabajo es hacer que esta habitación sea acogedora y esténdar estéticamente. Entra Flexbox, tu varita mágica, que te ayuda a colocar fácilmente los muebles (es decir, los elementos de la página web). Ya sea un sofá (contenido principal) o una mesa de café (información complementaria), con Flexbox, puedes asegurarte de que todos estén perfectamente ubicados.

Antes de meternos manos a la obra con Flexbox, repasemos rápidamente algunos conceptos fundamentales:

• Contenedor flexible: Puedes pensar en él como tu habitación, donde colocarás varios muebles.
• Elementos flexibles: Estos son tus muebles, como sofás, sillas y mesas de café.

Para comenzar a usar Flexbox, primero debes declarar un contenedor flexible. Es como decir: "Muy bien, vamos a decorar esta habitación".

.container {
  display: flex;
}

Una vez que lo haces, todos los hijos directos de la clase .container se convierten en elementos flexibles, siguiendo las reglas de diseño de Flexbox.

La propiedad CSS display establece si un elemento se trata como una caja de bloque o en línea y el diseño utilizado para sus hijos, como el diseño de flujo, la cuadrícula o el diseño flexible.

Podemos usar el atributo display para cambiar la forma en que se colocan los elementos en línea, por ejemplo:

display: block le da a los elementos su propio espacio, mientras que display: inline-block permite un diseño más flexible, permitiendo que los elementos se ubiquen uno al lado del otro, pero aún así controlar sus dimensiones.

Ahora que sabemos cómo se utiliza display, podemos agregar lo siguiente a style.css:

.navigation li {
  display: inline-block;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
  display: block;
}
form.form-content {
  display: block;
  padding: 0.8em 0;
}

Eje principal y eje transversal

En el mundo de Flexbox, dos conceptos son cruciales: eje principal y eje transversal. Por defecto, el eje principal es horizontal y el eje transversal es vertical, pero esto se puede ajustar con la propiedad flex-direction.

• Eje principal horizontal: flex-direction: row; (por defecto)
• Eje principal vertical: flex-direction: column;

Por ejemplo:

Elementos flexibles

Ahora, vamos a hablar sobre cómo posicionar nuestro mobiliario (Elementos flexibles).

• justify-content: Esta propiedad controla cómo se distribuyen los Elementos flexibles a lo largo del eje principal. Imagina ajustar la distancia entre un sofá y las sillas para asegurarte de que no estén demasiado separados ni demasiado cerca.
• align-items: Esta propiedad decide cómo se alinean los Elementos flexibles a lo largo del eje transversal. Es como asegurar de que todas tus pinturas cuelguen al mismo nivel, lo que hace que la habitación se vea ordenada.
• flex-grow: Imagina que quieres que tu estantería ocupe todo o parte del espacio restante. Con esta propiedad, puedes "hacer crecer" una pieza de mobiliario (elemento) para llenar el espacio adicional.

Veamos la magia de Flexbox en acción con un diseño simple, que consta de un contenedor y tres elementos. Lo que queremos hacer es centrar estos tres elementos horizontalmente dentro del contenedor y asegurarnos de que estén equitativamente distribuidos cuando haya suficiente espacio.

Con esta configuración, nuestro mobiliario (elementos) se posicionará tal como lo deseamos.

Flexbox es realmente como la magia, que nos permite organizar nuestras páginas web con una flexibilidad y facilidad sin precedentes. Ahora que has dominado esta magia, adelante y pruébalo. ¡Crea la "habitación" de tus sueños!

Para demostrar de manera nítida la magia de Flexbox, generaré una ilustración que muestre una habitación con un diseño de Flexbox, incluyendo piezas de mobiliario (como un sofá, una mesa de café y una estantería) que representen diferentes Elementos flexibles. Esto mostrará cómo se colocan elegantemente en la habitación utilizando propiedades de Flexbox como justify-content y align-items.

En resumen, Flexbox es un modelo de diseño unidimensional que te permite alinear fácilmente los elementos horizontal o verticalmente, y es perfecto para crear diseños responsivos. Aquí hay algunos términos clave para conocer:

• Contenedor flexible: El elemento padre que contiene los Elementos flexibles.
• Elemento flexible: Un elemento individual dentro del contenedor flexible.
• Dirección flexible: Determina el eje principal del contenedor.
• Envuelve flexible: Controla si los elementos deben envolverse en múltiples líneas o no.
• Justifica el contenido: Alinea los elementos a lo largo del eje principal.
• Alinea los elementos: Alinea los elementos a lo largo del eje transversal.

Ahora que sabemos cómo usar Flexbox, podemos agregar lo siguiente a style.css:

body {
  display: flex;
  flex-direction: column;
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
header {
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
ul {
  list-style: none;
  display: flex;
  flex-direction: row;
}
.navigation-section {
  width: 70%;
}
section {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 10% 0;
}
.story-sect {
  display: flex;
  flex-direction: row-reverse;
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.samples {
  flex-direction: column;
  text-align: center;
}
footer {
  display: flex;
  flex-direction: row-reverse;
  height: 5em;
  width: 100%;
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

Resumen

En este laboratorio, Jordan aplicó con éxito Flexbox al sitio web "Casa de Mascotas", mejorando la respuesta y la estética de su diseño. A través de pasos enfocados en el encabezado, la navegación y las secciones principales, el sitio web ahora muestra el contenido de manera eficiente en diferentes dispositivos. Flexbox resultó ser una herramienta invaluable para crear diseños dinámicos y flexibles, lo que demuestra su importancia en el diseño web moderno.