Flexbox

Flexbox (Flexible Box Layout) es el sistema de layout unidimensional de CSS. Se activa con una sola declaración — display: flex — sobre un elemento contenedor, y reorganiza por completo cómo se distribuyen sus hijos directos. En lugar de depender del flujo normal del documento, los hijos se convierten en ítems flex que el contenedor puede alinear, distribuir y ordenar con precisión en una única dimensión: una fila o una columna.

El problema que resuelve Flexbox es real y cotidiano: centrar un elemento verticalmente, distribuir los links de una barra de navegación con espacio uniforme entre ellos, hacer que un conjunto de tarjetas ocupe el ancho disponible y se alineen por su base. Antes de Flexbox, estas tareas requerían floats, márgenes calculados manualmente o trucos con display: table. Con Flexbox, son declarativas: le decís al contenedor cómo quieres que se distribuyan los ítems, y el navegador lo resuelve.

Flexbox opera en una sola dimensión a la vez: o trabaja en filas (horizontal) o en columnas (vertical), pero no ambas simultáneamente. Para layouts de dos dimensiones — cuadrículas donde necesitás controlar filas y columnas al mismo tiempo — la herramienta es CSS Grid (CAT-26). En la práctica se usan juntos: Grid para la estructura de la página, Flexbox para los componentes internos (una barra de navegación, un grupo de botones, una tarjeta).

Antes de Flexbox, el flujo normal determinaba la posición de los elementos: los bloques apilados en columna, los inline en línea. Flexbox establece un contexto de formato flex que suspende esas reglas dentro del contenedor: los márgenes de los ítems no colapsan, float y vertical-align dejan de tener efecto sobre ellos, y el contenedor toma el control total del layout.

Cómo funciona

Contenedor e ítems

La distinción fundamental de Flexbox es entre contenedor e ítems. El contenedor es el elemento que recibe display: flex (o display: inline-flex). Los hijos directos de ese contenedor pasan a ser automáticamente ítems flex, sin que sea necesario declarar nada en ellos. Los nietos y descendientes más profundos no se ven afectados — Flexbox solo actúa un nivel hacia abajo.

.nav {
  display: flex; /* .nav es el contenedor */
}
/* todos los hijos directos de .nav son ítems flex */

Las propiedades de Flexbox se dividen en dos grupos: las del contenedor — que controlan cómo se organizan los ítems en su conjunto — y las del ítem — que controlan el comportamiento individual de cada uno. Esta tanda documenta las del contenedor; las propiedades del ítem (flex, align-self, order) se cubren en la tanda de ítems.

Eje principal y eje cruzado

Cuando se activa Flexbox, el contenedor tiene dos ejes perpendiculares:

• Eje principal (main axis): la dirección en que fluyen los ítems. Va desde main-start hasta main-end.
• Eje cruzado (cross axis): perpendicular al principal. Va desde cross-start hasta cross-end.

El eje principal lo define flex-direction. Con el valor por defecto row, el eje principal es horizontal (de izquierda a derecha) y el cruzado es vertical (de arriba a abajo). Con column, se invierte: el principal es vertical y el cruzado es horizontal.

Este detalle es crítico: justify-content siempre actúa sobre el eje principal, y align-items siempre actúa sobre el eje cruzado. Cuando cambiás flex-direction, los ejes rotan — y con ellos, el efecto visual de esas propiedades cambia aunque el código sea idéntico.

Propiedades del contenedor

Las propiedades que se aplican al contenedor flex controlan el layout de todos los ítems en su conjunto:

Propiedades del ítem (tanda 17)

Las propiedades del ítem individual controlan cómo cada hijo se comporta dentro del contenedor. Se cubren en la tanda siguiente:

• flex (shorthand de flex-grow, flex-shrink, flex-basis) — qué tanto crece o se encoge el ítem
• align-self — anula align-items para un ítem específico
• order — cambia el orden visual sin alterar el HTML

display: flex vs display: inline-flex

display: flex hace que el contenedor sea un bloque (ocupa todo el ancho de su padre). display: inline-flex hace que el contenedor se comporte como elemento en línea externamente — útil para un botón o etiqueta cuyo interior necesita alineación flex pero que debe fluir con el texto que lo rodea. En ambos casos, los ítems hijos se comportan exactamente igual.

Flexbox vs flujo normal vs Grid

Gotchas conceptuales

• Solo los hijos directos son ítems flex. Los nietos no se ven afectados. Si necesitás que un nieto también participe en Flexbox, aplicá display: flex en su padre inmediato.
• float y vertical-align dejan de funcionar en los ítems. El contexto flex los ignora — no son bugs, es comportamiento definido.
• Los márgenes de los ítems no colapsan. En flujo normal los márgenes verticales colapsan; dentro de un contenedor flex, cada margen se respeta individualmente.
• justify-content solo actúa si hay espacio libre. Si los ítems ya llenan el contenedor, no hay espacio para distribuir y la propiedad no tiene efecto visible.

Vigente / legacy

Flexbox es ampliamente compatible desde 2015 y hoy es una propiedad baseline widely available. No hay técnica legacy equivalente: los floats y los hacks con display: table que se usaban antes son código obsoleto en nuevos proyectos. No se necesitan prefijos de vendor para el uso moderno de Flexbox.

Contenedor

El contenedor flex es el elemento que recibe display: flex. Es quien establece el contexto de formato flex y controla cómo se distribuyen todos sus hijos directos. Las propiedades del contenedor no afectan a los ítems individualmente: definen las reglas de layout para el grupo completo.

Las propiedades que se aplican al contenedor son:

• flex-direction — define el eje principal (fila o columna) y su dirección
• flex-wrap — controla si los ítems se envuelven en múltiples líneas cuando no caben
• justify-content — distribuye los ítems sobre el eje principal
• align-items — alinea los ítems sobre el eje cruzado (en una sola línea)
• align-content — distribuye las líneas sobre el eje cruzado (cuando hay flex-wrap)
• gap — espacio entre ítems en ambos ejes

Ítems

Los ítems flex son los hijos directos del contenedor. Se convierten en ítems automáticamente, sin necesitar ninguna declaración propia. Las propiedades del ítem controlan cómo cada uno se comporta individualmente dentro del layout que define el contenedor.

Las propiedades que se aplican a los ítems son:

• flex — shorthand de flex-grow, flex-shrink y flex-basis; controla cuánto crece o se encoge el ítem respecto al espacio disponible
• align-self — anula align-items del contenedor para este ítem en particular
• order — cambia el orden visual del ítem sin alterar el HTML