⏱️ Duración estimada: 3 horas

Sesión 09 - Actividad de Maquetación con Flexbox

Fecha: 3 de Marzo de 2026

Contenidos de la Sesión

Esta sesión se dedicó íntegramente a una actividad práctica de maquetación con el objetivo de repasar y consolidar todo lo aprendido hasta ahora: HTML5 semántico, CSS Box Model y, especialmente, CSS Flexbox.

El enunciado completo de la actividad está disponible en el repositorio:

• flex-activity.md — descripción textual de la actividad
• flex-activity.png — captura visual de referencia

El código de ejemplo desarrollado en clase se encuentra en la carpeta del repositorio: mwc/.

1. Repaso general de Flexbox

Antes de empezar la actividad se repasaron las propiedades de Flexbox vistas en la sesión anterior:

2. flex-grow - Crecer para ocupar espacio disponible

flex-grow define la capacidad de un flex item para crecer y ocupar el espacio libre disponible en el contenedor. Su valor es un número sin unidades que actúa como proporción.

• Valor 0 (por defecto): el item no crece.
• Valor 1 o superior: el item sí crece para ocupar el espacio libre.

.contenedor {
  display: flex;
}

.item-a {
  flex-grow: 1; /* ocupa 1 parte del espacio libre */
}

.item-b {
  flex-grow: 2; /* ocupa el doble de espacio libre que item-a */
}

Ejemplo en la actividad (tarjetas de ponentes):

.ponente {
  flex-grow: 1; /* cada tarjeta crece para ocupar el espacio disponible */
}

3. flex-basis - Tamaño base de un flex item

flex-basis define el tamaño inicial de un flex item antes de que se distribuya el espacio libre. Es similar a width (en ejes horizontales) o height (en ejes verticales), pero específico para Flexbox.

.item {
  flex-basis: 200px; /* el item empieza con 200px de ancho */
}

.item-auto {
  flex-basis: auto; /* usa el tamaño de contenido (valor por defecto) */
}

Ejemplo en la actividad (tarjetas de ponentes):

.ponente {
  flex-basis: 200px; /* tamaño base de cada tarjeta */
  flex-grow: 1; /* pueden crecer si hay espacio disponible */
}

4. flex-shrink - Encoger cuando no hay espacio

flex-shrink define la capacidad de un flex item para encogerse cuando el contenedor no tiene suficiente espacio. Es el complemento de flex-grow.

• Valor 1 (por defecto): el item puede encogerse.
• Valor 0: el item no se encoge (mantiene su flex-basis o tamaño declarado).

.item-fijo {
  flex-shrink: 0; /* no se encoge aunque no haya espacio */
  flex-basis: 300px;
}

.item-flexible {
  flex-shrink: 1; /* se encoge proporcionalmente (valor por defecto) */
}

5. La propiedad shorthand flex

Las tres propiedades anteriores (flex-grow, flex-shrink y flex-basis) se pueden escribir de forma abreviada con la propiedad flex:

.item {
  /* flex: flex-grow flex-shrink flex-basis */
  flex: 1 1 200px;
}

/* equivale a: */
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}

Valores habituales:

flex: 1; /* flex: 1 1 0% — crece, se encoge, empieza desde 0 */
flex: auto; /* flex: 1 1 auto — crece, se encoge, usa tamaño natural */
flex: none; /* flex: 0 0 auto — no crece, no se encoge */

6. Pseudo-clase :hover

La pseudo-clase :hover permite aplicar estilos a un elemento cuando el cursor del ratón está encima de él. Es muy útil para dar retroalimentación visual al usuario en botones, enlaces y tarjetas.

selector:hover {
  /* estilos que se aplican al pasar el ratón */
}

Ejemplo en la actividad (botones con efecto hover):

button {
  background-color: rgb(71, 71, 165);
  color: white;
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: rgb(50, 50, 130); /* color más oscuro al pasar el ratón */
}

7. Estructura de la actividad: Landing Page de evento tecnológico

La actividad consistió en maquetar una landing page de un evento tecnológico con las siguientes secciones, usando HTML5 semántico y Flexbox:

Header

Logo a la izquierda y menú de navegación a la derecha:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header nav ul {
  display: flex;
  list-style: none;
  gap: 2em;
}

Hero Section

Texto e imagen en dos columnas:

.content-flex {
  display: flex;
  gap: 3em;
  align-items: center;
}

.content-flex > img {
  flex-basis: 50%;
  flex-shrink: 0;
}

Sección de Ponentes (Cards)

Cuatro tarjetas distribuidas con flex-wrap, flex-basis y flex-grow (sin width fija en píxeles):

.ponentes {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.ponente {
  flex-basis: 200px;
  flex-grow: 1;
}

Agenda / Horario

Dos columnas: horarios a la izquierda, descripciones a la derecha.

Footer

Tres bloques distribuidos horizontalmente:

.columns-3 {
  display: flex;
  justify-content: space-between;
  gap: 2em;
}

.column {
  flex: 1;
}

8. Ejemplo desarrollado en clase: MWC

En clase se desarrolló el HTML completo del ejemplo mwc/ (Mobile World Congress) para ilustrar la estructura y se explicaron algunos casos de maquetación con Flex. El resto del CSS se dejó como práctica para completar en casa.

Estructura del ejemplo:

mwc/
├── index.html   — HTML completo con todas las secciones
├── reset.css    — Reset de CSS
├── style.css    — Estilos con Flexbox
└── img/         — Imágenes del proyecto

Resumen

En esta sesión hemos practicado y consolidado:

• ✅ Maquetación completa de una landing page con HTML5 semántico
• ✅ Uso de Flexbox para estructurar todos los bloques del layout
• ✅ flex-grow para que los items ocupen el espacio disponible de forma proporcional
• ✅ flex-basis como tamaño inicial de los flex items (alternativa flexible a width)
• ✅ flex-shrink para controlar cómo se encogen los items cuando falta espacio
• ✅ La propiedad shorthand flex que combina flex-grow, flex-shrink y flex-basis
• ✅ La pseudo-clase :hover para añadir interactividad visual

Lo más importante:

Recursos Adicionales

• MDN - flex-grow
• MDN - flex-shrink
• MDN - flex-basis
• MDN - flex (shorthand)
• MDN - :hover
• CSS Tricks - A Complete Guide to Flexbox
• Josh Comeau - An Interactive Guide to Flexbox
• Flexbox Froggy - Juego para practicar Flexbox