Desarrollo Frontend

Arquitectura Flexible con Flexbox

Bienvenido al estándar moderno de la maquetación web. En este curso completo desglosaremos la especificación Flexbox propiedad por propiedad. Entenderás la diferencia crítica entre ejes, dominarás el cálculo del espacio disponible y aprenderás patrones de diseño que te ahorrarán cientos de líneas de código CSS.

Flexbox cambió las reglas del juego: por primera vez, el diseño web responde inteligentemente al contenido.

¿Qué es Flexbox?

Flexbox (Flexible Box Layout Module) es un modelo de diseño unidimensional. A diferencia de `block` (vertical) o `inline` (horizontal), Flexbox está diseñado para distribuir elementos en una sola dimensión (fila o columna) de manera eficiente, incluso cuando sus tamaños son desconocidos o dinámicos.

La Estructura: Contenedor vs Ítems

Para trabajar con Flexbox es vital distinguir dos roles. Las propiedades de CSS se aplican de forma diferente según el rol: 1. **Flex Container (Padre):** El elemento que envuelve todo. Define el contexto. 2. **Flex Items (Hijos):** Los elementos directos dentro del padre que se vuelven flexibles.

Diagrama jerárquico mostrando al padre conteniendo a tres hijos flexibles — Solo los hijos directos se ven afectados. Los nietos no heredan las propiedades flex del abuelo.

Activando el Poder: Display Flex

Todo comienza aquí. Al aplicar `display: flex` al padre, ocurren dos cosas inmediatamente: * Los hijos se colocan en una fila (por defecto). * Los hijos se comportan como 'flex items'.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.padre {
  display: flex;
  /* O display: inline-flex si quieres que el contenedor se comporte como texto */
}

.padre {
  display: flex;
  /* O display: inline-flex si quieres que el contenedor se comporte como texto */
}

Concepto Clave: Los Dos Ejes

Flexbox no usa 'izquierda/derecha' o 'arriba/abajo', usa **Ejes**: * **Main Axis (Eje Principal):** La dirección en la que fluyen los ítems (definida por `flex-direction`). * **Cross Axis (Eje Transversal):** Perpendicular al eje principal. Entender esto es crucial porque las propiedades de alineación dependen del eje, no de la pantalla.

Gráfico vectorial mostrando el Main Axis horizontal y Cross Axis vertical — Si cambias la dirección a columna, los ejes rotan 90 grados.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.contenedor {
  display: flex;
  flex-direction: row; /* Default */
}

.contenedor {
  display: flex;
  flex-direction: row; /* Default */
}

Items alineados horizontalmente 1-2-3 — Ideal para barras de navegación o tarjetas de productos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.sidebar {
  display: flex;
  flex-direction: column-reverse;
  /* El primer elemento HTML aparecerá visualmente al fondo */
}

.sidebar {
  display: flex;
  flex-direction: column-reverse;
  /* El primer elemento HTML aparecerá visualmente al fondo */
}

Comparativa visual de column, row-reverse y column-reverse — Column es la base del diseño móvil: todo suele apilarse verticalmente en pantallas pequeñas.

Flex-Wrap: Controlando el Desbordamiento

Por defecto, Flexbox es 'testarudo': intentará meter todos los elementos en una sola línea (`nowrap`), encogiéndolos hasta que no quepan más o se desborden. Con `wrap`, permitimos que los elementos salten a una nueva línea si no tienen espacio suficiente.

Ilustración de elementos saltando de línea al reducir el ancho del contenedor — Esencial para Responsive Design: permite que una grilla de 4 columnas pase a 2 o 1 automáticamente.

Flex-Flow: La Abreviación

Es muy común definir dirección y envoltura al mismo tiempo. `flex-flow` es el shorthand para `flex-direction` + `flex-wrap`.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.galeria {
  display: flex;
  /* Dirección: Fila | Envoltura: Permitida */
  flex-flow: row wrap;
}

.galeria {
  display: flex;
  /* Dirección: Fila | Envoltura: Permitida */
  flex-flow: row wrap;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.banner-centrado {
  display: flex;
  justify-content: center;
}

.banner-centrado {
  display: flex;
  justify-content: center;
}

Tres bloques centrados horizontalmente en un contenedor ancho — Justify-content trabaja sobre el espacio 'sobrante' del contenedor.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.menu-navegacion {
  display: flex;
  justify-content: space-between;
  /* Logo a la izquierda, Login a la derecha */
}

.menu-navegacion {
  display: flex;
  justify-content: space-between;
  /* Logo a la izquierda, Login a la derecha */
}

Diferencia visual entre space-between, around y evenly — Space-between es el estándar de oro para cabeceras y pies de página.

Align-Items: Control Vertical

Controla la alineación en el **Eje Transversal** (perpendicular). Si estamos en fila, controla la verticalidad. * `stretch`: (Default) Estira los hijos para llenar el alto del padre. * `flex-start` / `flex-end`: Arriba o abajo. * `center`: Centrado vertical. * `baseline`: Alinea según la base del texto.

Bloques de diferente altura alineados al centro verticalmente — Con 'align-items: center' solucionamos el histórico problema de centrar verticalmente en CSS.

Align-Content: Líneas Múltiples

Solo funciona cuando `flex-wrap: wrap` está activo y hay más de una línea de elementos. Alinea el bloque completo de filas dentro del contenedor. Es similar a `justify-content` pero en el eje cruzado.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.muro-ladrillos {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  align-content: center; 
  /* Todas las filas de ladrillos se agrupan en el centro vertical */
}

.muro-ladrillos {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  align-content: center; 
  /* Todas las filas de ladrillos se agrupan en el centro vertical */
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.lista-tarjetas {
  display: flex;
  gap: 20px; /* 20px de espacio entre todos los hijos */
  /* También acepta: row-gap y column-gap */
}

.lista-tarjetas {
  display: flex;
  gap: 20px; /* 20px de espacio entre todos los hijos */
  /* También acepta: row-gap y column-gap */
}

Elementos separados uniformemente por un espacio vacío sin usar margin — Originalmente de CSS Grid, ahora 'gap' es totalmente compatible con Flexbox.

Propiedades de los Hijos (Items)

Hasta ahora vimos propiedades del Padre. Pero los hijos tienen control individual sobre su tamaño y orden. Las más importantes son: * `order` * `flex-grow` * `flex-shrink` * `flex-basis` * `align-self`

Diagrama señalando propiedades aplicables solo a los hijos — Estas propiedades permiten excepciones: 'todos alineados arriba, excepto este que va abajo'.

Order: Reordenamiento Visual

Permite cambiar el orden en que aparecen los elementos sin tocar el HTML. Recibe números enteros (negativos o positivos). Todos los items tienen `order: 0` por defecto.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.item-importante {
  order: -1; /* Se mueve al principio de todo */
}

.footer-movil {
  order: 99; /* Se mueve al final */
}

.item-importante {
  order: -1; /* Se mueve al principio de todo */
}

.footer-movil {
  order: 99; /* Se mueve al final */
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.sidebar { flex-grow: 1; }
.contenido { flex-grow: 3; }
/* El contenido será 3 veces más ancho que el sidebar si hay espacio */

.sidebar { flex-grow: 1; }
.contenido { flex-grow: 3; }
/* El contenido será 3 veces más ancho que el sidebar si hay espacio */

Barra de progreso llenándose según el factor de crecimiento — Ideal para layouts líquidos donde el contenido principal debe expandirse.

Flex-Shrink: Factor de Encogimiento

Lo opuesto a grow. Define cuánto se encoge un ítem si falta espacio. * `1` (default): Se encoge igual que los demás. * `0`: NO se encoge (mantiene su tamaño original a toda costa). Útil para logos o íconos que no deben deformarse.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.logo {
  width: 50px;
  flex-shrink: 0; 
  /* Siempre medirá 50px, aunque la pantalla sea minúscula */
}

.logo {
  width: 50px;
  flex-shrink: 0; 
  /* Siempre medirá 50px, aunque la pantalla sea minúscula */
}

Flex-Basis: Tamaño Ideal

Establece el tamaño base del elemento antes de aplicar grow o shrink. Es como `width` pero más poderoso, porque respeta el eje flex (será `height` si es columna). Se recomienda usar `flex-basis` en lugar de `width` dentro de Flexbox.

Diagrama mostrando flex-basis como el punto de partida antes de estirar o encoger — Flex-basis: auto mira el contenido; Flex-basis: 0 ignora el contenido y reparte espacio puro.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.item-flexible {
  /* Grow: 1, Shrink: 1, Basis: 200px */
  flex: 1 1 200px;
}

.item-flexible {
  /* Grow: 1, Shrink: 1, Basis: 200px */
  flex: 1 1 200px;
}

Tabla de equivalencias de flex shorthand — Usar el shorthand es mejor porque los navegadores a veces infieren mal los valores individuales.

Align-Self: La Excepción

Permite que un hijo individual desobedezca la regla `align-items` del padre. Por ejemplo, si el padre centra todo, un hijo puede tener `align-self: flex-end` para irse al fondo.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.padre { 
  align-items: center; 
}

.hijo-rebelde {
  align-self: flex-start; /* Este se va arriba */
}

.padre { 
  align-items: center; 
}

.hijo-rebelde {
  align-self: flex-start; /* Este se va arriba */
}

Margin Auto: El Truco Mágico

En Flexbox, `margin: auto` es superpoderoso. Absorbe todo el espacio disponible en esa dirección. Si tienes un navbar y al último elemento le pones `margin-left: auto`, este se empujará hasta el final derecho, separándose de los demás.

Ejemplo de navbar donde el botón de login está separado a la derecha usando margin-left auto — Es la forma más sencilla de crear grupos separados dentro de un mismo contenedor flex.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex: 1; /* Ocupa el espacio vacío para empujar el footer */
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex: 1; /* Ocupa el espacio vacío para empujar el footer */
}

Diseño de tarjeta producto con alineación perfecta — Flexbox es ideal para igualar alturas de tarjetas adyacentes.

¿Qué es Flexbox?

Es un módulo de diseño de CSS3 diseñado para mejorar la distribución de elementos en una interfaz, permitiendo alinear, centrar y distribuir espacio dinámicamente entre contenedores, incluso si sus tamaños son desconocidos.

¿Cuál es la diferencia principal entre Flexbox y CSS Grid?

Flexbox es unidimensional (maneja una fila O una columna a la vez). Grid es bidimensional (maneja filas Y columnas simultáneamente). Usa Flexbox para componentes lineales y alineación; usa Grid para el esqueleto general de la página.

¿Cómo centro un elemento vertical y horizontalmente?

Es el 'Santo Grial' de CSS, resuelto por Flexbox: aplica `display: flex`, `justify-content: center` y `align-items: center` al contenedor padre.

¿Para qué sirven los ejes Main y Cross?

Son abstractos. El Main Axis sigue la dirección del flujo (`flex-direction`), y el Cross Axis lo cruza perpendicularmente. Las propiedades de alineación (`justify` vs `align`) dependen de estos ejes, no de arriba/abajo/izquierda/derecha.

¿Qué propiedad define si los elementos van en fila o columna?

`flex-direction`. Sus valores son `row` (defecto), `column`, `row-reverse` y `column-reverse`.

¿Cómo hago que los elementos bajen a la siguiente línea si no caben?

Usa `flex-wrap: wrap` en el contenedor padre. Por defecto es `nowrap`, lo que fuerza a los elementos a quedarse en una línea (encogiéndose o desbordándose).

¿Qué hace `justify-content: space-between`?

Distribuye los elementos a lo largo del eje principal de forma que el primero queda pegado al inicio, el último al final, y el espacio restante se reparte equitativamente entre los elementos intermedios.

¿Por qué `align-items` no funciona en mi contenedor?

Generalmente porque el contenedor no tiene una altura definida (`height` o `min-height`). Si el contenedor es exactamente del mismo alto que su contenido, no hay espacio vertical extra para alinear nada.

¿Qué es `flex-basis`?

Define el tamaño inicial ideal de un flex item antes de que se distribuya el espacio sobrante. Es similar a `width` (en filas) o `height` (en columnas), pero más estricto.

¿Cuál es la diferencia entre `align-items` y `align-content`?

`align-items` alinea elementos individuales dentro de su línea. `align-content` alinea las líneas enteras dentro del contenedor (solo funciona si hay múltiples líneas con `flex-wrap`).

¿Qué hace `flex-grow: 1`?

Permite que el ítem crezca para ocupar el espacio vacío disponible. Si todos los ítems tienen `flex-grow: 1`, se reparten el espacio equitativamente.

¿Cómo evito que un ítem (como un logo) se aplaste?

Usa `flex-shrink: 0`. Esto le dice al navegador que ese ítem no debe encogerse bajo ninguna circunstancia, incluso si falta espacio.

¿Qué significa el shorthand `flex: 1`?

Equivale a `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0%`. Significa que el elemento es totalmente flexible y su tamaño depende puramente del espacio disponible.

¿Puedo cambiar el orden visual de los elementos?

Sí, usando la propiedad `order` en los hijos. Acepta números enteros. Un valor menor (ej: -1) pone el elemento primero; uno mayor (ej: 10) lo pone al final.

¿Es compatible Flexbox con navegadores antiguos?

Tiene soporte excelente en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). En versiones muy antiguas de IE (10/11) tiene soporte parcial con muchos bugs, pero hoy en día es seguro para producción.

¿Cómo funciona `gap` en Flexbox?

Define el espacio entre filas y columnas. Es mejor que usar márgenes porque no agrega espacio en los bordes exteriores del contenedor, solo *entre* los elementos.

¿Qué hace `align-self`?

Permite sobreescribir la alineación `align-items` del padre para un hijo específico. Útil para desencajar un solo elemento del patrón general.

¿Los 'float' siguen siendo útiles con Flexbox?

Para layout, no. Flexbox reemplaza completamente la necesidad de usar `float` para colocar elementos lado a lado. `float` debe reservarse solo para texto que envuelve imágenes.

¿Cómo hago un 'Sticky Footer' con Flexbox?

Pon `min-height: 100vh` y `display: flex; flex-direction: column` al `body`. Luego, al contenido principal dale `flex: 1`. Esto empujará el footer al fondo de la pantalla automáticamente.

¿Qué es `display: inline-flex`?

Hace que el contenedor flex se comporte como un elemento en línea (inline) respecto a su entorno externo, pero por dentro sigue siendo un contexto flex para sus hijos.

¿Por qué las imágenes a veces se deforman en Flexbox?

Flexbox intenta encoger todo para que quepa. Si no proteges la imagen con `flex-shrink: 0` o un contenedor, cambiará su relación de aspecto. Solución: `object-fit: cover` o `align-self: start`.

¿Qué es el 'colapso de márgenes' y ocurre en Flexbox?

El colapso de márgenes verticales (típico de `display: block`) NO ocurre en contenedores Flex. Los márgenes de elementos adyacentes simplemente se suman.

¿Cómo uso `margin: auto` en Flexbox?

Es muy potente. `margin-left: auto` en un hijo empujará ese elemento totalmente a la derecha, consumiendo todo el espacio libre. Es ideal para separar grupos de botones.

¿Flexbox afecta a elementos con `position: absolute`?

No directamente. Un elemento absoluto se sale del flujo flex. Sin embargo, si el padre flex tiene `position: relative`, puedes usar el absoluto para colocar iconos sobre las esquinas de las flex-cards.

¿Cuál es el valor por defecto de `justify-content`?

`flex-start`. Los elementos se agrupan al inicio del eje principal.

¿Cuál es el valor por defecto de `align-items`?

`stretch`. Por eso, por defecto, todas las columnas en una fila flex parecen tener la misma altura (la del más alto).

¿Qué pasa si uso `width` y `flex-basis` a la vez?

`flex-basis` tiene prioridad si se define. Si `flex-basis` es `auto`, entonces mira el `width`.

¿Flexbox funciona con accesibilidad y lectores de pantalla?

Sí, pero cuidado con `order`. Cambiar el orden visual no cambia el orden en el DOM. Un lector de pantalla leerá el orden HTML, lo que puede confundir al usuario si visualmente está distinto.

¿Cómo creo una grilla responsive simple sin Media Queries?

Con Flexbox es difícil hacerlo perfecto sin media queries (Grid es mejor para esto). Pero puedes usar `flex-wrap: wrap` y bases porcentuales o fijas para que los elementos caigan naturalmente.

¿Qué significa `flex-flow: column wrap` y cuándo usarlo?

Ordena elementos en columnas verticales y, si se acaba el alto del contenedor, crea una nueva columna a la derecha. Útil para layouts estilo 'masonry' (muros de ladrillos) o galerías horizontales de scroll.