Bloque 2: Layouts modernos

Flexbox: el maquetador de una dimensión

Flexbox (display: flex) organiza los hijos de un contenedor en una sola dirección: fila o columna. Es la herramienta perfecta para barras de navegación, filas de tarjetas, pies de página… cualquier componente lineal.

.menu {
  display: flex;            /* activa el modo flex */
  gap: 16px;              /* espacio entre ítems */
}

1.1 · Los dos ejes

Todo flexbox tiene dos ejes y conviene nombrarlos bien:

• Eje principal: la dirección en la que fluyen los ítems. Por defecto es la fila (flex-direction: row).
• Eje cruzado: perpendicular al principal.

1.2 · Recetas infalibles

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

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

1.3 · Propiedades de los ítems

.card { flex: 1; }   /* crece por igual hasta llenar la fila */
.lateral { flex: 0 0 220px; } /* no crece, no encoge, ancho fijo */
.especial { align-self: flex-end; } /* excepción puntual */

CSS Grid: plantillas bidimensionales

Mientras Flexbox piensa en líneas, CSS Grid (display: grid) piensa en cuadrículas completas: filas Y columnas a la vez. Es ideal para galerías, dashboards y el esqueleto global de una página.

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 columnas iguales */
  gap: 16px;
}

2.1 · La unidad mágica: fr

1fr es una fracción del espacio libre. Con 200px 1fr 1fr reservas 200px para el lateral y repartes el resto en dos mitades: algo imposible de calcular cómodamente con porcentajes.

2.2 · Ocupar varias casillas

.destacada {
  grid-column: span 2;   /* ocupa 2 columnas */
  grid-row: span 2;     /* ocupa 2 filas */
}

2.3 · El patrón profesional: auto-fit + minmax

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
/* «columnas de mínimo 220px que se estiran por igual;
   crea o retira pistas automáticamente según el ancho» */

2.4 · Plantillas con áreas

.page {
  display: grid;
  grid-template-areas:
    "cabecera cabecera"
    "menu     contenido"
    "pie       pie";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

<header>  { grid-area: cabecera }
<nav>     { grid-area: menu }
<main>    { grid-area: contenido }
<footer>  { grid-area: pie }

Posicionamiento: relative, absolute, fixed y sticky

3.1 · La pareja relative + absolute

Un hijo absoluto busca al pariente más cercano con position distinto de static. Si nadie lo tiene, se ancla al documento entero — el clásico susto de principiante. La receta estándar: padre relative, hijo absolute:

.tarjeta { position: relative; }

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
}

3.2 · Sticky, el favorito de las navbars

header {
  position: sticky;
  top: 0;              /* imprescindible: define el umbral */
  z-index: 100;        /* por encima del contenido */
}

Responsive mobile-first y media queries

4.1 · La base: la meta viewport

Sin esta línea en el <head>, los móviles simulan un escritorio de 980px y hacen zoom: todo tu responsive se pierde.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.2 · Media queries: CSS condicional

@media (min-width: 768px) {
  /* estas reglas SOLO se aplican a partir de 768px */
  .features { grid-template-columns: repeat(3, 1fr); }
}

4.3 · Mobile-first: el orden profesional

Escribe primero los estilos del móvil (lo pequeño) y amplía con min-width. El código base sirve al 70 % de las visitas y las reglas grandes solo cargan donde aportan.

.features { display: grid;
  grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
}

.features { display: grid;
  grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .features { grid-template-columns: repeat(3, 1fr); }
}

• Puntos de ruptura por contenido, no por dispositivos: cuando el diseño «pide» un cambio (~480, ~768, ~1024px).
• Imágenes fluidas siempre: img { max-width: 100% }.
• Anchos fluidos: %, vw/vh o contenedores con max-width en rem — nunca anchos gigantes fijos.