Fundamentos de Diseño CSS

Introducción

¡Bienvenido al laboratorio de Fundamentos de Diseño CSS! En esta sesión práctica, explorarás los fundamentos de CSS Flexbox, un potente modelo de diseño que proporciona una forma eficiente de organizar, alinear y distribuir el espacio entre elementos dentro de un contenedor.

A lo largo de este laboratorio, trabajarás con un archivo HTML preconfigurado (index.html) y un archivo CSS (style.css). Tu tarea será modificar el archivo style.css para manipular el diseño de los elementos en la página. Puedes ver tus cambios en tiempo real cambiando a la pestaña Web 8080 en el entorno del laboratorio.

Aprenderás a:

• Inicializar un contenedor flex.
• Alinear elementos a lo largo del eje principal usando justify-content.
• Alinear elementos a lo largo del eje transversal usando align-items.
• Cambiar la dirección del diseño con flex-direction.
• Permitir que los elementos se ajusten en múltiples líneas usando flex-wrap.

¡Empecemos!

Establecer display flex en un elemento contenedor

En este paso, comenzarás transformando un elemento de nivel de bloque estándar en un contenedor flex. Este es el paso fundamental para crear cualquier diseño flexbox.

La propiedad display: flex; se aplica a un elemento padre (el contenedor) para habilitar un contexto flex para todos sus hijos directos (los elementos). Una vez aplicada, los hijos se organizan automáticamente en una fila.

Primero, abre el archivo style.css desde el explorador de archivos en el lado izquierdo de tu pantalla.

A continuación, localiza la regla CSS .container. Agrega la propiedad display: flex; dentro de esta regla.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  /* We will add flex properties here */
  display: flex;
}

Después de agregar el código, guarda el archivo. Ahora, cambia a la pestaña Web 8080 para ver el resultado. Notarás que las cajas numeradas, que anteriormente estaban apiladas verticalmente, ahora están dispuestas horizontalmente en una sola fila.

Usar la propiedad justify-content con space-between

En este paso, aprenderás a controlar la alineación de los elementos a lo largo del eje principal (horizontalmente, por defecto) utilizando la propiedad justify-content. Esta propiedad ayuda a distribuir el espacio libre adicional en el contenedor.

Usaremos el valor space-between, que distribuye los elementos de manera uniforme. El primer elemento se posiciona al inicio del contenedor, el último elemento al final, y el espacio restante se distribuye equitativamente entre los elementos.

En tu archivo style.css, agrega la propiedad justify-content: space-between; a la regla .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
}

Guarda el archivo y revisa la pestaña Web 8080. Verás que los elementos flex ahora están distribuidos a lo ancho completo del contenedor, con un espaciado igual entre ellos.

Aplicar la propiedad align-items con center

En este paso, aprenderás a alinear los elementos a lo largo del eje transversal (verticalmente, por defecto) utilizando la propiedad align-items.

Para ver el efecto de la alineación vertical, primero necesitamos darle a nuestro contenedor una altura. Luego, usaremos el valor center para align-items para centrar verticalmente los elementos dentro del contenedor.

En tu archivo style.css, agrega una height y la propiedad align-items: center; a la regla .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 200px;
  align-items: center;
}

Guarda el archivo y visualiza el resultado en la pestaña Web 8080. El contenedor ahora es más alto, y todos los elementos flex están perfectamente centrados en medio del espacio vertical.

Implementar la propiedad flex-direction con column

En este paso, cambiarás la dirección del eje principal de horizontal a vertical utilizando la propiedad flex-direction.

Por defecto, la dirección flex es row. Al establecerla en column, puedes apilar los elementos flex verticalmente. Cuando cambias la dirección flex a column, el eje principal se vuelve vertical y el eje transversal se vuelve horizontal. Esto significa que justify-content ahora controlará la alineación vertical, y align-items controlará la alineación horizontal.

En tu archivo style.css, agrega la propiedad flex-direction: column; a la regla .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 400px; /* Let's increase height for better visualization */
  align-items: center;
  flex-direction: column;
}

Nota: Hemos aumentado la altura a 400px para ver mejor el efecto de justify-content en un diseño de columna.

Guarda el archivo y observa los cambios en la pestaña Web 8080. Los elementos ahora están apilados en una sola columna. Observa cómo justify-content: space-between ahora agrega espacio verticalmente entre los elementos, y align-items: center los centra horizontalmente.

Añadir propiedad flex-wrap con wrap para ajuste

En este paso final, aprenderás a manejar casos en los que los elementos flex desbordan su contenedor. La propiedad flex-wrap permite que los elementos se ajusten a una nueva línea en lugar de encogerse o desbordarse.

Para demostrar esto, volveremos a un diseño basado en filas y estableceremos un ancho fijo en el contenedor que sea demasiado estrecho para contener todos los elementos en una sola línea.

Primero, limpiemos la regla .container eliminando las propiedades de los pasos anteriores (justify-content, align-items, flex-direction y height). Luego, agregaremos un width fijo y la propiedad flex-wrap: wrap;.

Actualiza tu regla .container en style.css para que se vea así:

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  width: 450px; /* Set a fixed width to force wrapping */
  flex-wrap: wrap;
}

Guarda el archivo y actualiza la pestaña Web 8080. Verás que los elementos flex que no caben en la primera línea se han ajustado a una segunda línea. Esto es esencial para crear diseños responsivos que se adapten a diferentes tamaños de pantalla.

Resumen

¡Felicitaciones por completar el laboratorio de Fundamentos de Diseño CSS! Has aprendido con éxito los conceptos centrales de CSS Flexbox y los has aplicado para crear diseños flexibles y responsivos.

En este laboratorio, has practicado:

• display: flex;: Para crear un contenedor flex.
• justify-content: Para alinear elementos a lo largo del eje principal.
• align-items: Para alinear elementos a lo largo del eje transversal.
• flex-direction: Para definir la dirección del eje principal (fila o columna).
• flex-wrap: Para permitir que los elementos se ajusten a múltiples líneas.

Estas propiedades son los bloques de construcción del diseño web moderno. Te animamos a seguir experimentando con diferentes valores para estas propiedades para afianzar aún más tu comprensión de Flexbox.