Flexbox

¿Qué es Flexbox?

Flexbox es un modelo de diseño de CSS diseñado para facilitar la alineación, distribución y orden del espacio entre los elementos dentro de un contenedor. Antes de Flexbox, los desarrolladores dependían de floats, posicionamiento y diseños basados en tablas para realizar tareas sencillas, como centrar un div o crear una barra de navegación con elementos de ancho equitativo. Esos enfoques funcionaban, pero eran frágiles y verbosos. Flexbox reemplazó la mayoría de ellos con un sistema limpio y predecible.

La idea clave es el modelo de dos ejes. Cada contenedor flex tiene un eje principal (main axis) y un eje transversal (cross axis). Por defecto, el eje principal se extiende horizontalmente y el eje transversal verticalmente, pero puedes intercambiarlos con flex-direction. Todo en Flexbox —la alineación, el espaciado, el salto de línea— se describe en relación con estos dos ejes. Una vez que comprendes ese modelo mental, las propiedades se vuelven intuitivas.

Flexbox es también unidimensional. Organiza los elementos en una sola fila o una sola columna a la vez. Si necesitas controlar filas y columnas simultáneamente, CSS Grid es la herramienta adecuada. Pero para la gran mayoría de los diseños a nivel de componente —barras de navegación, filas de tarjetas, grupos de formularios, pies de página— Flexbox es exactamente lo que necesitas.

Flex container vs flex items

Flexbox funciona mediante una relación padre-hijo. Conviertes un elemento padre en un flex container configurando display: flex. Sus hijos directos se convierten automáticamente en flex items y comienzan a seguir las reglas de Flexbox.

/* style.css */
.container {
  display: flex;
}

.container > * {
  /* These are now flex items */
}

Esta distinción es importante porque cada propiedad de Flexbox se aplica ya sea al contenedor o a los ítems, pero nunca a ambos. Las propiedades del contenedor controlan el entorno del diseño: la dirección del eje, la alineación, el ajuste (wrapping) y el espacio (gap). Las propiedades de los ítems controlan cómo se comportan los elementos individuales dentro de ese entorno: cuánto crecen, cuánto se encogen, su tamaño base y su orden.

Un contenedor también puede usar display: inline-flex para comportarse como un elemento inline mientras sigue aplicando Flexbox a sus hijos. En la práctica, display: flex (a nivel de bloque) cubre la mayoría de los casos de uso.

flex-direction

flex-direction define la dirección del eje principal. Es la propiedad más fundamental de Flexbox porque todas las demás propiedades dependen de hacia dónde se dirija dicho eje.

/* style.css */
.container {
  display: flex;
  flex-direction: row; /* default */
}

Los cuatro valores:

• row — los elementos fluyen de izquierda a derecha. Este es el valor por defecto y el más común.
• row-reverse — los elementos fluyen de derecha a izquierda.
• column — los elementos fluyen de arriba hacia abajo.
• column-reverse — los elementos fluyen de abajo hacia arriba.

/* style.css */
.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column-reverse {
  flex-direction: column-reverse;
}

Cambiar flex-direction intercambia cuál es el eje principal y cuál es el eje transversal. Cuando flex-direction es row, justify-content controla la distribución horizontal y align-items controla la alineación vertical. Cuando flex-direction es column, esos roles se invierten.

justify-content

justify-content alinea los flex items a lo largo del eje principal. Controla cómo se distribuye el espacio extra entre o alrededor de los elementos.

/* style.css */
.container {
  display: flex;
  justify-content: center;
}

Los valores más comunes:

• flex-start — los elementos se agrupan hacia el inicio del eje principal (valor por defecto).
• center — los elementos se centran a lo largo del eje principal.
• flex-end — los elementos se agrupan hacia el final del eje principal.
• space-between — los elementos se distribuyen con un espacio igual entre ellos, sin espacio en los extremos.
• space-around — los elementos tienen un espacio igual a su alrededor, por lo que los huecos entre elementos son el doble que los de los extremos.
• space-evenly — los elementos tienen exactamente el mismo espacio entre sí y en los extremos.

/* style.css */
.start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.between {
  justify-content: space-between;
}

.around {
  justify-content: space-around;
}

.evenly {
  justify-content: space-evenly;
}

space-between es el valor más utilizado para barras de navegación: el logo queda a la izquierda y los enlaces a la derecha, con espacio en el medio. space-evenly ofrece una distribución más equilibrada para elementos como barras de iconos o listas de etiquetas.

align-items

align-items alinea los elementos flex a lo largo del eje transversal (cross axis). Mientras que justify-content distribuye el espacio a lo largo del eje principal, align-items controla cómo se posicionan los elementos dentro del eje transversal.

/* style.css */
.container {
  display: flex;
  align-items: center;
}

Los valores clave:

• stretch — los elementos se estiran para llenar el eje transversal (valor por defecto).
• flex-start — los elementos se alinean al inicio del eje transversal.
• center — los elementos se centran a lo largo del eje transversal.
• flex-end — los elementos se alinean al final del eje transversal.
• baseline — los elementos se alinean según la línea base (baseline) de su texto.

/* style.css */
.container {
  display: flex;
  align-items: stretch; /* default */
}

.centered {
  align-items: center;
}

.bottom {
  align-items: flex-end;
}

.baseline-aligned {
  align-items: baseline;
}

El valor baseline es útil cuando los elementos tienen diferentes tamaños de fuente o padding; asegura que sus líneas de texto se alineen sobre la misma línea invisible. El valor por defecto stretch es la razón por la cual los elementos flex a menudo parecen más altos de lo esperado: se expanden para llenar el eje transversal por defecto.

align-content

align-content controla cómo se distribuyen múltiples líneas de elementos flex a lo largo del eje transversal. Solo tiene efecto cuando flex-wrap está configurado como wrap y el contenido se ajusta en varias líneas.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Sin flex-wrap: wrap, align-content no hace nada porque solo hay una línea. Cuando el contenido se ajusta, los valores son similares a justify-content:

• flex-start — las líneas se agrupan hacia el inicio.
• center — las líneas se centran a lo largo del eje transversal.
• flex-end — las líneas se agrupan hacia el final.
• space-between — las líneas se distribuyen con un espacio igual entre ellas.
• space-around — las líneas tienen un espacio igual a su alrededor.
• space-evenly — las líneas tienen un espaciado exactamente igual.
• stretch — las líneas se estiran para llenar el espacio disponible.

Para contenedores flex de una sola línea, align-items es lo que necesitas. align-content se vuelve relevante para diseños multilínea, como nubes de etiquetas o grupos de botones ajustados.

flex-wrap

Por defecto, los flex items intentan ajustarse en una sola línea. flex-wrap permite que los elementos se distribuyan en varias líneas cuando se quedan sin espacio.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
}

Los tres valores:

• nowrap — todos los elementos permanecen en una sola línea (por defecto). Los elementos pueden encogerse para ajustarse.
• wrap — los elementos saltan a nuevas líneas según sea necesario.
• wrap-reverse — los elementos saltan a nuevas líneas, pero la dirección del eje transversal se invierte.

/* style.css */
.single-line {
  flex-wrap: nowrap; /* default */
}

.multi-line {
  flex-wrap: wrap;
}

.reversed-wrap {
  flex-wrap: wrap-reverse;
}

El salto de línea es esencial para los layouts responsivos. Una barra de navegación con muchos enlaces puede usar flex-wrap: wrap para que los elementos pasen a una nueva línea en pantallas más pequeñas sin generar desbordamiento. Combinado con gap, los layouts con wrap se ven limpios sin necesidad de márgenes adicionales.

flex-grow, flex-shrink, flex-basis

Estas tres propiedades controlan cómo los flex items se reparten el espacio a lo largo del eje principal. Trabajan en conjunto para determinar el tamaño final de cada elemento.

flex-basis establece el tamaño inicial de un elemento antes de que se distribuya el espacio extra. Funciona de manera similar a width, pero es respetado por el algoritmo de Flexbox.

/* style.css */
.item {
  flex-basis: 200px;
}

flex-grow controla cuánto se expande un elemento para llenar el espacio disponible. El valor por defecto es 0, lo que significa que los elementos no crecen. Un valor de 1 indica que el elemento toma una parte equitativa del espacio sobrante.

/* style.css */
.item-a {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2; /* takes twice as much leftover space as item-a */
}

flex-shrink controla cuánto se contrae un elemento cuando no hay espacio suficiente. El valor por defecto es 1, lo que significa que los elementos se encogen proporcionalmente. Un valor de 0 evita que el elemento se encoja.

/* style.css */
.item {
  flex-shrink: 0; /* will not shrink, may overflow */
}

La propiedad abreviada flex combina las tres:

/* style.css */
.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

.item {
  flex: 0 0 200px; /* no grow, no shrink, fixed 200px */
}

El shorthand flex: 1 es uno de los patrones más útiles en Flexbox: otorga a cada elemento una parte igual del espacio disponible, lo cual es perfecto para columnas de ancho uniforme, vistas divididas y grids responsivos.

propiedad order

Por defecto, los elementos flex aparecen en el mismo orden en que se encuentran en el HTML. La propiedad order te permite reordenarlos visualmente sin modificar el DOM.

/* style.css */
.item-a {
  order: 2;
}

.item-b {
  order: 1; /* appears first visually */
}

.item-c {
  order: 3; /* appears last visually */
}

Todos los elementos tienen por defecto un valor de order: 0. Los números más bajos aparecen primero. Los elementos con el mismo valor de order aparecen según el orden de la fuente. Los valores negativos son válidos y colocarán los elementos antes que aquellos con el orden predeterminado.

Esto es muy útil para diseños responsivos donde quieres que una barra lateral aparezca arriba del contenido principal en dispositivos móviles, pero debajo de este en escritorio; simplemente cambia el order mediante una media query en lugar de reestructurar el HTML.

propiedad gap

La propiedad gap añade un espaciado consistente entre los elementos flex. Sustituye a los antiguos trucos de margin que antes eran necesarios para gestionar el espaciado en los layouts flex.

/* style.css */
.container {
  display: flex;
  gap: 1rem;
}

Puedes definir valores diferentes para el espacio entre filas y columnas:

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 2rem;
}

A diferencia de los márgenes, gap solo añade espacio entre los elementos, no antes del primero ni después del último. Esto lo hace predecible y elimina la necesidad de usar márgenes negativos o elementos envolventes adicionales. Funciona tanto en layouts flex de una sola línea como de varias líneas.

Patrones comunes de Flexbox

Una vez que conoces las propiedades, los patrones surgen de forma natural. Aquí tienes los diseños más comunes que Flexbox resuelve.

Centrado de contenido:

/* style.css */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Este es el uso clásico de Flexbox: centra un elemento hijo tanto horizontalmente como verticalmente dentro de su padre. Antes de Flexbox, el centrado vertical era un problema notorio.

Barras de navegación:

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

.nav-links {
  display: flex;
  gap: 1.5rem;
}

El logo se ubica a la izquierda, los enlaces a la derecha y todo permanece centrado verticalmente. Añadir gap a los enlaces permite que mantengan un espaciado uniforme.

Diseños de tarjetas (Cards):

/* style.css */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
}

Las tarjetas crecen para llenar el espacio disponible, se encogen cuando es necesario y saltan a nuevas líneas en pantallas más pequeñas. El basis 300px establece un ancho mínimo cómodo.

Diseño “Holy Grail”:

/* style.css */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

La página es una columna que llena el viewport. La sección central es una fila con una barra lateral de ancho fijo y un área principal flexible. Este patrón era extremadamente difícil de implementar antes de Flexbox.

Cuándo usar Flexbox vs Grid

Flexbox y CSS Grid son complementarios, no competidores. La regla más sencilla: usa Flexbox para una dimensión y Grid para dos.

Usa Flexbox cuando:

• Estés organizando elementos en una sola fila o columna.
• Necesites alinear o distribuir el espacio entre los elementos.
• Estés construyendo layouts a nivel de componente: navbars, grupos de botones, filas de formularios o filas de tarjetas.
• Quieras que los elementos se ajusten (wrap) naturalmente a nuevas líneas.
• Necesites centrar contenido.

Usa Grid cuando:

• Necesites controlar filas y columnas simultáneamente.
• Estés construyendo layouts a nivel de página con header, sidebar, main y footer.
• Quieras una ubicación explícita de los elementos en una cuadrícula. . Necesites que las pistas (tracks) se dimensionen basándose en el contenedor del grid en lugar de basarse en el contenido.

En la práctica, la mayoría de los proyectos utilizan ambos. Un layout de página usa Grid para la estructura general, mientras que los componentes individuales dentro de ese layout usan Flexbox para la alineación interna. Resuelven problemas diferentes y funcionan perfectamente juntos.

Mejores prácticas

• Usa gap en lugar de márgenes — solo añade espacio entre elementos, evitando problemas de espaciado en los bordes.
• Usa el atajo flex — flex: 1 es más limpio que configurar grow, shrink y basis por separado.
• Evita anchos fijos en los flex items — deja que flex-basis y flex-grow gestionen el tamaño para lograr responsividad.
• Prefiere flex-wrap: wrap para layouts responsivos en lugar de media queries para el tamaño de los elementos.
• Usa align-items: center para el centrado vertical — es el enfoque más fiable.
• Combínalo con min-width: 0 en flex items que puedan desbordarse — por defecto, los flex items no se encogen más allá del tamaño de su contenido.
• Usa HTML semántico dentro de los contenedores flex — Flexbox gestiona el diseño, no el significado.
• Prueba con diferentes longitudes de contenido — los layouts de Flexbox deben adaptarse elegantemente tanto a contenidos cortos como largos.

Errores comunes

• Configurar display: flex en los elementos en lugar del contenedor.
• Olvidar que align-content requiere de flex-wrap: wrap para tener algún efecto.
• Usar width fijos en los elementos flex en lugar de flex-basis.
• No configurar min-width: 0 en los elementos que podrían desbordar su contenedor flex.
• Abusar de !important para forzar el tamaño de los elementos flex en lugar de comprender el algoritmo de flex.
• Aplicar propiedades de Flexbox al eje incorrecto — olvidar que flex-direction intercambia los ejes principal y transversal.
• Ignorar la accesibilidad — Flexbox cambia el orden visual con order pero no el orden del DOM, por lo que los lectores de pantalla siguen el código fuente.

¿Sigue valiendo la pena aprender Flexbox en 2026?

Absolutamente. Flexbox no es una moda pasajera: es el sistema de diseño fundamental del CSS moderno. Todos los frameworks principales, librerías de componentes y sistemas de diseño dependen de él. CSS Grid complementa a Flexbox para diseños bidimensionales, pero Flexbox sigue siendo la opción predeterminada para la alineación, el espaciado y la distribución a nivel de componente. Comprender Flexbox también facilita el aprendizaje de Grid, ya que el modelo de ejes y las propiedades de alineación se trasladan directamente. Si estás construyendo cualquier cosa para la web, Flexbox es una habilidad que utilizarás todos los días.

Cómo aprender Flexbox

Flexbox es visual, por lo que la mejor manera de aprenderlo es viéndolo en acción:

1. Comienza con display: flex y justify-content: observa cómo se distribuyen los elementos a lo largo de un eje.
2. Añade align-items: comprende el eje transversal y cómo se relaciona con flex-direction.
3. Experimenta con flex-direction: column: observa cómo se intercambian los ejes.
4. Prueba flex-wrap: wrap y gap: construye un diseño de varias líneas.
5. Juega con flex-grow, flex-shrink y flex-basis: entiende cómo los elementos comparten el espacio.
6. Construye diseños reales: una navbar, una fila de tarjetas, un hero centrado o un diseño con sidebar.
7. Utiliza una herramienta interactiva como Flexbox Froggy o la guía de Flexbox de CSS Tricks para visualizar cada propiedad.

A partir de ahí, pasa a CSS Grid para diseños bidimensionales. Nuestro tutorial interactivo de CSS cubre Flexbox, Grid y diseño responsivo con ejercicios prácticos.