Flexbox

⏱ 45 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Distinguir contenedor, ítems y los dos ejes de Flexbox.
Alinear y repartir con justify-content, align-items y gap.
Controlar el tamaño de los ítems con flex.
Resolver los patrones habituales: centrado, barra de navegación y tarjetas.

1.La idea de Flexbox

Flexbox es el sistema de CSS para acomodar elementos en una sola dimensión: en una fila o en una columna. Resuelve de forma sencilla cosas que antes eran un dolor de cabeza: alinear, centrar, repartir espacio y hacer que los elementos se adapten.

Todo parte de dos piezas:

Pieza	Qué es	Cómo se activa
Contenedor flex (flex container)	El elemento padre	`display: flex` (o `inline-flex`)
Ítems flex (flex items)	Los hijos directos del contenedor	Automático: todos los hijos directos

⚠️ Importante · Solo los hijos directos

display: flex actúa solo sobre los hijos directos, no sobre los nietos. Si algo no se alinea como esperas, revisa en las herramientas de desarrollo cuál es realmente el contenedor y cuáles los ítems.

Los dos ejes

Un contenedor flex tiene un eje principal (la dirección en que se colocan los ítems) y un eje transversal (perpendicular). Con flex-direction: row (por defecto), el eje principal es horizontal; con column, es vertical. Casi todas las propiedades se entienden a partir de aquí:

Aspecto	Eje principal	Eje transversal
Se controla con	`justify-content`	`align-items`
En `row` es	Horizontal →	Vertical ↓
En `column` es	Vertical ↓	Horizontal →

2.Propiedades del contenedor

Propiedad	Qué hace	Valores principales
`display: flex`	Activa flexbox	`flex`, `inline-flex`
`flex-direction`	Dirección del eje principal	`row`, `row-reverse`, `column`, `column-reverse`
`justify-content`	Reparte a lo largo del eje principal	`flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`
`align-items`	Alinea en el eje transversal	`stretch` (por defecto), `flex-start`, `center`, `flex-end`, `baseline`
`flex-wrap`	¿Pueden pasar a otra línea?	`nowrap` (por defecto), `wrap`
`gap`	Espacio entre ítems	`16px`, `1rem`, `1rem 2rem` (fila / columna)
`align-content`	Reparte las líneas cuando hay `wrap`	Igual que `justify-content`

Se cambian justify-content, align-items y flex-direction en el editor y los tres ítems se reacomodan al instante — Así se comporta el contenedor al cambiar sus propiedades: pruébalo tú en el editor de abajo.

✏️ Prueba todas las propiedades

Código (edítalo)

<style>
  .caja { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
          height: 160px; background: #eef2ff; border: 2px dashed #4f46e5; padding: 8px; }
  .item { background: #4f46e5; color: #fff; padding: 12px; border-radius: 8px; font-weight: 700; }
  .item:nth-child(2) { padding: 28px 12px; }
</style>
<div class="caja">
  <div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
<p>Cambia: <code>justify-content</code> a <b>center</b>, <b>space-between</b>… <code>align-items</code> a <b>center</b>, <b>flex-end</b>… y <code>flex-direction</code> a <b>column</b>.</p>

Resultado

💡 Consejo · El truco para no confundirte

Antes de escribir, pregunta: «¿hacia dónde va mi eje principal?». justify-content siempre trabaja a lo largo de él, y align-items a través de él. Si cambias a column, los dos intercambian su dirección visual.

3.Propiedades de los ítems

Propiedad	Qué hace	Ejemplo
`flex-grow`	Cuánto crece para ocupar el espacio libre	`flex-grow: 1`
`flex-shrink`	Cuánto se encoge si no cabe (1 por defecto)	`flex-shrink: 0` para que no se encoja
`flex-basis`	Tamaño inicial antes de crecer o encogerse	`flex-basis: 200px`
`flex`	Atajo de las tres anteriores	`flex: 1`, `flex: 0 0 200px`, `flex: 1 1 250px`
`align-self`	Alineación propia en el eje transversal	`align-self: flex-end`
`order`	Cambia el orden visual	`order: -1` (va primero)

El atajo más usado es flex: 1: «reparte el espacio sobrante a partes iguales». Y margin-left: auto empuja un ítem al final:

✏️ Crecer y repartir

Código (edítalo)

<style>
  .caja { display: flex; gap: 8px; background: #eef2ff; padding: 8px; border: 2px dashed #4f46e5; margin-bottom: 10px; }
  .caja > div { background: #4f46e5; color: #fff; padding: 10px; border-radius: 8px; }
  .a > div:nth-child(2) { flex: 1; }
  .b > div { flex: 1; }
  .c > div:nth-child(1) { flex: 2; }
  .c > div:nth-child(2), .c > div:nth-child(3) { flex: 1; }
  .d > div:last-child { margin-left: auto; }
</style>
<div class="caja a"><div>fijo</div><div>flex: 1</div><div>fijo</div></div>
<div class="caja b"><div>1</div><div>1</div><div>1</div></div>
<div class="caja c"><div>2</div><div>1</div><div>1</div></div>
<div class="caja d"><div>logo</div><div>enlace</div><div>derecha (margin-left: auto)</div></div>

Resultado

📌 Nota · flex: 1 no es «igual ancho»

flex: 1 equivale a flex: 1 1 0: parte de ancho 0 y reparte todo el espacio. Por eso los ítems resultan iguales. Con flex: 1 1 auto, parten de su tamaño natural y por eso no son iguales.

4.Patrones que usarás todos los días

1. Centrar absolutamente

Centrar en horizontal y vertical

.centro {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

2. Barra de navegación

✏️ Barra con logo, menú y botón

Código (edítalo)

<style>
  .barra { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #1e2235; color: #fff; }
  .barra .menu { display: flex; gap: 14px; margin-left: auto; }
  .barra a { color: #fff; text-decoration: none; }
  .barra .cta { background: #4f46e5; padding: 6px 14px; border-radius: 8px; }
</style>
<header class="barra"><strong>Logo</strong><nav class="menu"><a href="#">Inicio</a><a href="#">Cursos</a><a href="#">Blog</a></nav><a class="cta" href="#">Entrar</a></header>

Resultado

3. Tarjetas de la misma altura

Con align-items: stretch (el valor por defecto) todas las tarjetas de una fila miden lo mismo, aunque su contenido sea distinto. Añade flex-wrap: wrap y flex: 1 1 220px para que se acomoden solas:

✏️ Tarjetas que se adaptan

Código (edítalo)

<style>
  .fila { display: flex; flex-wrap: wrap; gap: 12px; }
  .t { flex: 1 1 140px; padding: 12px; border: 1px solid #c7d2fe; border-radius: 12px; background: #fff; }
  .t h4 { margin: 0 0 6px; }
</style>
<div class="fila">
  <div class="t"><h4>Uno</h4><p>Corto.</p></div>
  <div class="t"><h4>Dos</h4><p>Un texto bastante más largo que obliga a la tarjeta a crecer.</p></div>
  <div class="t"><h4>Tres</h4><p>Medio.</p></div>
  <div class="t"><h4>Cuatro</h4><p>Otra tarjeta.</p></div>
</div>
<p>Reduce el ancho de la ventana: las tarjetas pasan a otra fila sin media queries.</p>

Resultado

4. Pie de página al fondo

El pie siempre abajo

body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }             /* el contenido absorbe el espacio libre */
/* el <footer> queda pegado al fondo aunque haya poco contenido */

5.Trampas habituales

Problema	Causa y solución
Mis ítems no se alinean	`display: flex` está en el elemento equivocado: debe ir en el padre directo
`align-items: center` no centra en vertical	El contenedor no tiene alto; ponle `height` o `min-height`
El texto largo desborda el ítem	Los ítems tienen `min-width: auto`; añade `min-width: 0` para permitir que se encojan
El ítem se encoge demasiado	Usa `flex-shrink: 0` o un `flex-basis` mínimo
No hay espacio entre ítems	Usa `gap` en el contenedor (mejor que márgenes)
El orden con `order` confunde	`order` solo cambia lo visual; el teclado y lectores de pantalla siguen el orden del HTML

⚠️ Importante · order y accesibilidad

Reordenar visualmente con order o row-reverse no cambia el orden en que se recorre la página con la tecla Tab o un lector de pantalla. Si quieres otro orden, cámbialo en el HTML.

6.Errores frecuentes

Esperar que flex afecte a los nietos.
Confundir justify-content y align-items al cambiar a column.
Usar márgenes en lugar de gap para separar ítems.
Dar width fijo a ítems flexibles y luego extrañarse de que no se adapten: prefiere flex-basis.
No poner flex-wrap: wrap y que en pantallas pequeñas los ítems se aprieten o desborden.
Olvidar min-width: 0 en ítems con texto largo o imágenes.
Usar flexbox para una cuadrícula de dos dimensiones: para eso está Grid (próxima lección).

📒 Apuntes para llevar

display: flex convierte al padre en contenedor y a sus hijos directos en ítems.
Hay un eje principal (flex-direction) y uno transversal: justify-content trabaja en el principal y align-items en el transversal.
gap separa los ítems; flex-wrap: wrap permite varias líneas.
flex: 1 reparte el espacio sobrante; flex: 0 0 200px fija un tamaño; margin-left: auto empuja un ítem al final.
align-items: stretch iguala la altura de las tarjetas de una fila.
justify-content: center + align-items: center centra en ambos ejes (con alto definido).
min-width: 0 evita que un ítem con texto largo desborde.
order solo cambia lo visual, no el orden de lectura.

7.Glosario

Término	Significado
Contenedor flex	El elemento con `display: flex`.
Ítem flex	Cada hijo directo de un contenedor flex.
Eje principal	La dirección en que se colocan los ítems (`flex-direction`).
Eje transversal	El eje perpendicular al principal.
`gap`	Espacio entre ítems, sin márgenes.
`flex-basis`	Tamaño inicial de un ítem antes de crecer o encogerse.
`flex-grow` / `flex-shrink`	Cuánto crece o se encoge un ítem.
`order`	Posición visual de un ítem.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Qué hace justify-content?

justify-content trabaja en el eje principal; align-items en el transversal.

Con flex-direction: column, ¿qué propiedad centra los ítems horizontalmente?

En column el eje principal es vertical, así que el horizontal es el transversal: align-items.

¿Cuál es la manera más cómoda de separar ítems flex?

gap separa solo entre ítems y no necesita quitar el margen del último.

align-items: center no centra en vertical. ¿Qué falta probablemente?

¿Qué hace flex: 1 en tres ítems hermanos?

Equivale a flex: 1 1 0: los tres crecen por igual y quedan del mismo ancho.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio