CSS Flexbox es el modo de diseño que usas cuando quieres colocar cosas en una fila o en una columna y que se repartan el espacio solas. Sin floats, sin position, sin trucos. Llevo años maquetando con él y sigue siendo lo primero que escribo en casi cualquier componente.
Esta guía no es una lista de propiedades para copiar. Las demos de abajo se mueven de verdad: pulsas un valor y ves las cajas cambiar de sitio en tu propio navegador. Aprender CSS Flexbox mirando cómo se comporta es diez veces más rápido que leerlo.
Tienes las 13 propiedades explicadas, la propiedad gap que casi ningún tutorial en español incluye todavía, los tres errores con los que todo el mundo pierde una tarde y cinco patrones listos para copiar. Vamos al grano.
¿Cómo funciona CSS Flexbox?
Flexbox trabaja en un solo eje a la vez. Esa es toda la idea, y es donde casi todo el mundo se atasca al principio.
Cuando escribes display: flex en un contenedor, aparecen dos ejes invisibles:
- Eje principal (main axis): la dirección en la que se colocan los hijos. Lo controla
flex-direction. - Eje transversal (cross axis): el perpendicular al principal. Siempre.
Aquí está el truco que te ahorra la confusión: justify-content siempre reparte en el eje principal y align-items siempre alinea en el transversal. Cuando cambias flex-direction a column, esas dos propiedades intercambian el sentido visual. No cambian de trabajo, cambia el eje.
Si alguna vez has escrito
align-items: centeresperando centrar en horizontal y no ha pasado nada, era esto. Estabas encolumn.
Esta es la diferencia con CSS Grid, que maneja filas y columnas a la vez. Más abajo tienes cuándo usar cada uno.
Propiedades del flex container
Son las que escribes en el elemento padre. Ocho en total, contando gap.
display
El interruptor. display: flex convierte el contenedor en bloque y sus hijos en flex items. display: inline-flex hace lo mismo pero el contenedor se comporta como inline, así que se queda al lado del texto en vez de ocupar toda la línea.
Un detalle que se olvida: float, clear y vertical-align dejan de tener efecto en los hijos. Si venías de maquetar con floats, puedes borrarlos todos.
flex-direction
Define el eje principal. Pulsa los valores y mira qué pasa:
Fíjate en que row-reverse no reordena el HTML: solo lo pinta al revés.
row(por defecto): de izquierda a derecha.row-reverse: de derecha a izquierda.column: de arriba a abajo.column-reverse: de abajo a arriba.
Y aquí tienes los cuatro valores juntos, para cuando quieras consultarlo de un vistazo sin volver a la demo:
flex-direction. Fíjate en dónde queda el número 1 en cada caso.En sitios con dir="rtl" (árabe, hebreo) los valores row y row-reverse se invierten solos. Flexbox respeta la dirección de escritura, y eso es una ventaja, no un error.
flex-wrap
Por defecto los flex items se apelotonan en una sola línea aunque no quepan. Con flex-wrap: wrap saltan a la línea siguiente cuando se quedan sin sitio. En el diagrama se ve mejor que con palabras:
nowrap los items se comprimen; con wrap bajan de línea.nowrap(por defecto): todo en una línea, se encoge lo que haga falta.wrap: salta de línea de arriba a abajo.wrap-reverse: salta de línea de abajo a arriba.
Te aconsejo poner wrap siempre que el contenedor tenga tarjetas o etiquetas. Es la diferencia entre un diseño que aguanta el móvil y uno que se sale de la pantalla.
flex-flow
Atajo de flex-direction y flex-wrap en una línea. flex-flow: column wrap equivale a escribir las dos por separado. El valor por defecto es row nowrap.
justify-content
Reparte los items a lo largo del eje principal. Es la propiedad que más vas a usar:
Compara space-around con space-evenly: en el primero los huecos de los extremos son la mitad.
Los tres que usarás el 90 % del tiempo son flex-start, center y space-between. Ese último es el que resuelve la barra de navegación con logo a la izquierda y menú a la derecha.
justify-content repartiendo el mismo contenido en el eje principal.align-items
Alinea los items en el eje transversal. Las cajas de esta demo tienen alturas y tamaños de letra distintos a propósito, para que veas qué hace baseline:
baseline alinea por la línea del texto, no por el borde de la caja. Con tipografías de tamaños distintos es lo único que queda bien.
El valor por defecto es stretch, y de ahí viene el efecto más útil de Flexbox sin escribir nada: varias tarjetas en una fila quedan todas de la misma altura, la del contenido más largo. Si alguna vez has peleado con eso a base de height fijos, ya no hace falta.
align-items trabaja en el eje transversal. Compáralo con el diagrama de justify-content: son perpendiculares.align-content
Reparte las líneas dentro del contenedor cuando hay varias. Acepta flex-start, center, flex-end, space-between, space-around, space-evenly y stretch.
align-content haga algo.Y aquí va el aviso que falta en la mitad de los tutoriales: align-content no hace absolutamente nada si no hay más de una línea. Necesitas flex-wrap: wrap y suficientes items para que salten. Si no, no toques esta propiedad y usa align-items.
gap
La propiedad que te va a cambiar la vida y que no estaba en la versión anterior de esta guía. gap pone espacio entre los flex items sin tocar márgenes:
Sin márgenes negativos y sin :last-child. El hueco va entre items, nunca en los bordes.
Antes de gap, separar tarjetas significaba poner margin-right a todas y quitárselo a la última con :last-child. O peor, márgenes negativos en el contenedor. Todo eso sobra.
Puedes darle dos valores: gap: 16px 24px es 16 px entre filas y 24 px entre columnas. Funciona en todos los navegadores modernos; Safari lo soporta desde la versión 14.1, de 2021. En 2026 ya no necesitas alternativa.
Propiedades de los flex items
Estas cinco van en los hijos, no en el contenedor. Es el otro sitio donde la gente se equivoca: escribir flex-grow en el padre no hace nada.
flex-grow
Cuánto crece un item para ocupar el espacio libre. No es un tamaño, es una proporción de reparto.
Si los tres hijos tienen flex-grow: 1, el sobrante se parte en tres partes iguales. Si uno tiene 2 y los otros 1, ese primero se lleva el doble del espacio sobrante, no el doble de ancho total. Es una distinción que confunde a todo el mundo la primera vez.
flex-shrink
Lo contrario: cuánto se encoge un item cuando falta espacio. El valor por defecto es 1, así que todo se encoge por defecto. Con flex-shrink: 0 le dices a un elemento que no ceda ni un píxel. Es lo que necesitas para un logo o un botón que no debe deformarse.
flex-basis
El tamaño de partida antes de crecer o encogerse. En una fila hace el trabajo de width; en una columna, el de height.
Con auto (por defecto) parte del tamaño del contenido. Con 0 parte de cero, así que el reparto de flex-grow sale exactamente proporcional. Esa es la diferencia entre columnas casi iguales y columnas iguales de verdad.
flex (el atajo)
Junta flex-grow, flex-shrink y flex-basis. El valor por defecto es 0 1 auto.
Y ahora el detalle que casi nadie explica: flex: 1 no es lo mismo que flex-grow: 1. Cuando escribes el atajo con un solo número, el navegador rellena los otros dos así:
| Lo que escribes | Lo que aplica el navegador |
|---|---|
flex: 1 | flex-grow: 1 · flex-shrink: 1 · flex-basis: 0% |
flex-grow: 1 | flex-grow: 1 · flex-shrink: 1 · flex-basis: auto |
Ese flex-basis: 0% es el que hace que las columnas salgan idénticas. Por eso flex: 1 te da tres columnas exactas y flex-grow: 1 te da tres columnas de anchos ligeramente distintos según el texto que tenga cada una. Cuando quieras columnas iguales, usa el atajo.
align-self
Anula el align-items del contenedor para un item concreto. Útil para bajar un solo elemento al fondo de la fila con align-self: flex-end sin tocar los demás.
order
Cambia el orden visual sin tocar el HTML. Por defecto todos los items valen 0 y se pintan en el orden del código; un order: -1 manda un elemento al principio.
Te aviso de algo importante antes de que lo uses: order cambia lo que se ve, no el orden del DOM. El foco del teclado y los lectores de pantalla siguen el HTML. Si reordenas botones o enlaces con order, alguien navegando con Tab los recorrerá en un orden que no coincide con lo que ve en pantalla. Para cambios de maquetación grandes, cambia el HTML.
Los 3 errores que todos cometemos con Flexbox
Estos tres me han costado horas a lo largo de los años. Si te pasa algo raro con Flexbox, empieza por aquí.
1. El texto largo desborda el contenedor
Este es el rey. Pones flex: 1 en una caja con texto largo y en vez de recortarse, revienta el contenedor y empuja al vecino fuera. La izquierda está roto, la derecha arreglado:
Roto — sin min-width
Arreglado — con min-width: 0
Mismo HTML, mismo flex: 1. La única diferencia es min-width: 0.
La causa: los flex items tienen min-width: auto de fábrica, que significa «nunca te encojas por debajo de tu contenido». Y un nombre de archivo sin espacios no se puede partir. La solución es una línea:
.item {
flex: 1;
min-width: 0; /* deja que se encoja de verdad */
}En columnas, la propiedad equivalente es min-height: 0. Apúntalo, porque vas a volver a esto.
2. Usar align-content sin flex-wrap
Escribes align-content: center, no pasa nada, y te pasas veinte minutos revisando si has escrito bien el nombre. No hay nada que centrar porque solo hay una línea. Con una sola línea, la propiedad que quieres es align-items.
3. Anidar contenedores flex hasta el infinito
Flexbox es tan cómodo que acabas con seis display: flex anidados para colocar una tarjeta. Funciona, pero luego nadie entiende de dónde sale un espacio raro.
Mi regla: si estás colocando algo en dos dimensiones a la vez, filas y columnas, ese es trabajo de CSS Grid. Anidar Flexbox para simular una rejilla es la señal de que has elegido la herramienta equivocada.
Flexbox o CSS Grid: cuándo usar cada uno
La pregunta de siempre, y la respuesta corta es que no compiten. Flexbox reparte espacio en una dimensión; Grid coloca en dos. Ninguno sustituye al otro y en un proyecto real usas los dos, muchas veces anidados.
| Lo que necesitas | Herramienta | Por qué |
|---|---|---|
| Barra de navegación | Flexbox | Una fila, reparto por contenido |
| Rejilla de tarjetas | Grid | Filas y columnas a la vez |
| Botones o etiquetas en línea | Flexbox | Número variable, se ajusta al contenido |
| Layout de página completa | Grid | Zonas definidas, dos ejes |
| Centrar una cosa | Flexbox | Tres líneas y listo |
| Formulario con etiquetas alineadas | Grid | Columnas que deben cuadrar entre filas |
El criterio que uso: si el contenido manda, Flexbox. Si el layout manda, Grid. Cuando no sé cuántos elementos habrá ni de qué tamaño, Flexbox. Cuando sé exactamente qué forma quiero, Grid.
Así que de obsoleto, nada de nada. Flexbox sigue siendo el rey de las interfaces fluidas donde el contenido decide el tamaño.
Patrones de Flexbox listos para copiar
Cinco cosas que vas a necesitar en casi cualquier proyecto. Cópialas tal cual.
Centrar cualquier cosa
.centro {
display: flex;
align-items: center;
justify-content: center;
}Barra de navegación: logo a un lado, menú al otro
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.navbar .logo { flex-shrink: 0; }Tarjetas de la misma altura que se ajustan solas
.tarjetas {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.tarjetas > * {
flex: 1 1 280px; /* crece, se encoge, mínimo 280px */
}Ese 280px de flex-basis es el ancho mínimo antes de saltar de línea. Cámbialo y tienes un diseño responsive sin una sola media query.
Footer pegado abajo aunque haya poco contenido
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }Sidebar fija con contenido flexible
.layout { display: flex; gap: 32px; }
.sidebar { flex: 0 0 260px; } /* no crece, no se encoge */
.contenido { flex: 1; min-width: 0; }Fíjate en el min-width: 0 del contenido. Es el error número 1 de arriba, ya prevenido.
Generadores CSS Flexbox
Cuando no te apetece pensar, estos te dan el código con clics. Los tres siguen vivos y los he probado antes de dejarlos aquí:
- HTML CSS Tools — el más completo. Configuras contenedor e hijos por separado y te da el CSS con opción de atajos.
- Loading.io Flexbox Generator — el más rápido para probar una idea. Todo son botones y ves el resultado al instante.
- Flexbox Patterns — no es un generador, es una colección de componentes ya montados: galerías, tarjetas, barras de navegación. Pulsas y copias.
De los tres, el que más veces he acabado usando es Flexbox Patterns. No te da propiedades sueltas, te da el componente terminado con su HTML y su CSS:
Y para practicar jugando, te dejé una selección en juegos para aprender CSS. Hay un par de flexbox que enganchan más de lo que parece.
Dónde seguir aprendiendo
Flexbox se aprende usándolo, no leyendo más guías. Mi orden recomendado: monta los cinco patrones de arriba en un archivo suelto, rómpelos a propósito y arréglalos. En una tarde lo tienes interiorizado.
Si quieres ver Flexbox aplicado en proyectos reales, la referencia técnica que consulto cuando dudo de un valor es la documentación de Flexbox en MDN, que está traducida al español y siempre actualizada.
Tip: Una forma rápida de aprender maquetación real es abrir plantillas hechas por otros y leer su CSS. En las plantillas HTML de Envato Elements tienes cientos montadas con Flexbox y Grid: descargas una, abres la hoja de estilos y ves cómo lo resuelve alguien que vive de esto. A mí me enseñó más que tres tutoriales seguidos.
Preguntas frecuentes
¿Qué es CSS Flexbox exactamente?
Es un modo de diseño de CSS que reparte el espacio disponible entre los hijos de un contenedor, a lo largo de un solo eje. Lo activas con display: flex en el elemento padre. Sirve para filas y columnas, no para rejillas de dos dimensiones.
¿Cómo centro un div con Flexbox?
Tres líneas en el contenedor: display: flex, align-items: center y justify-content: center. Si el contenedor no tiene altura, añade min-height o no verás el centrado vertical porque no hay espacio que repartir.
¿Por qué mi texto desborda el contenedor flex?
Porque los flex items tienen min-width: auto por defecto y no se encogen por debajo de su contenido. Añade min-width: 0 al item que desborda. Tienes la demo con el antes y el después en la sección de errores.
¿Qué diferencia hay entre flex-basis y width?
En una fila hacen casi lo mismo, pero flex-basis gana si están las dos. La diferencia práctica es que flex-basis es el punto de partida para el reparto de flex-grow y flex-shrink, mientras que width es un tamaño a secas. En una columna, flex-basis actúa sobre la altura.
¿Puedo usar gap con Flexbox sin problemas?
Sí. Todos los navegadores modernos lo soportan; Safari fue el último en llegar, en la versión 14.1 de 2021. En 2026 no necesitas alternativa con márgenes salvo que tu proyecto tenga que funcionar en navegadores muy antiguos.
¿Flexbox está obsoleto por culpa de CSS Grid?
No, resuelven problemas distintos. Grid coloca en dos dimensiones y Flexbox reparte en una. En cualquier proyecto real usas los dos, y muchas veces un contenedor Flexbox dentro de una celda de Grid.
¿Vale la pena aprender Flexbox antes que Grid?
Sí, empieza por Flexbox. Es más pequeño, más intuitivo y lo vas a usar en más sitios. Cuando lo domines, Grid te costará la mitad porque muchos conceptos se repiten: los ejes, el reparto de espacio, gap.
Más recursos de CSS
- Microinteracciones útiles: 15 ejemplos con código — el paso siguiente cuando ya colocas bien los elementos.
- Cómo crear una página web en HTML — la base sobre la que aplicas todo esto.
- Aprende CSS con estos juegos online — para practicar los ejes sin escribir código.
- Cómo hacer un slider en HTML5 y CSS3 — un caso práctico donde Flexbox hace el trabajo pesado.
Si has llegado hasta aquí, haz una cosa antes de cerrar la pestaña: abre un archivo nuevo, copia el patrón de las tarjetas y cambia el 280px por otro número. Ver el diseño reorganizarse solo es el momento en el que Flexbox hace clic. Y si te ha servido, cuéntame en los comentarios qué patrón usas más.
