Flexbox

07

Flexbox

Alinea, distribuye y ordena elementos como un profesional.

Tienes tres tarjetas y quieres que se muestren una al lado de la otra, centradas y con espacio entre ellas. ¿Cómo lo haces? Con float? Con inline-block y cálculos de márgenes? Eso era antes. Hoy la respuesta es Flexbox.

Flexbox (Flexible Box Layout) es un sistema de layout que te permite alinear y distribuir elementos dentro de un contenedor con una sola propiedad. Es lo que más vas a usar en CSS, todos los días.

---

Cómo activar Flexbox

Solo necesitas una propiedad en el contenedor padre:

.contenedor {
  display: flex;
}

Eso es todo. Los hijos directos de ese contenedor ahora son flex items y se colocan automáticamente en fila.

<div class="contenedor">
  <div class="caja">1</div>
  <div class="caja">2</div>
  <div class="caja">3</div>
</div>

.contenedor {
  display: flex;
}

.caja {
  padding: 2rem;
  background: #13131f;
  border: 1px solid #1e1e35;
}

Sin display: flex, las cajas se apilan verticalmente (porque son block). Con display: flex, se ponen en fila automáticamente.

💡Contenedor flex vs Items flex

Flexbox tiene dos actores: el contenedor (el padre con display: flex) y los items (los hijos directos). Las propiedades de alineación van en el contenedor. Las propiedades de tamaño y orden van en los items.

---

Los dos ejes

Flexbox trabaja con dos ejes:

                    Eje principal (main axis)
                ─────────────────────────────►

              ┌──────┬──────┬──────┐
    Eje       │      │      │      │  │
    cruzado   │  1   │  2   │  3   │  │
    (cross)   │      │      │      │  │
              └──────┴──────┴──────┘  ▼

• Eje principal (main axis): la dirección en que se colocan los items. Por defecto es horizontal (→).
• Eje cruzado (cross axis): perpendicular al principal. Por defecto es vertical (↓).

flex-direction — Cambia la dirección

.contenedor {
  display: flex;
  flex-direction: row;            /* → Horizontal (por defecto) */
  flex-direction: row-reverse;    /* ← Horizontal invertido */
  flex-direction: column;         /* ↓ Vertical */
  flex-direction: column-reverse; /* ↑ Vertical invertido */
}

---

Alineación en el eje principal: justify-content

Controla cómo se distribuyen los items a lo largo del eje principal.

.contenedor {
  display: flex;
  justify-content: flex-start;     /* ┃■ ■ ■      ┃ Al inicio (defecto) */
  justify-content: flex-end;       /* ┃      ■ ■ ■┃ Al final */
  justify-content: center;         /* ┃   ■ ■ ■   ┃ Centrados */
  justify-content: space-between;  /* ┃■    ■    ■┃ Espacio entre items */
  justify-content: space-around;   /* ┃ ■   ■   ■ ┃ Espacio alrededor */
  justify-content: space-evenly;   /* ┃  ■  ■  ■  ┃ Espacio uniforme */
}

El que más vas a usar: space-between (items pegados a los bordes, espacio solo entre ellos).

---

Alineación en el eje cruzado: align-items

Controla cómo se alinean los items en el eje cruzado (verticalmente si la dirección es row).

.contenedor {
  display: flex;
  height: 300px;
  align-items: stretch;      /* Estiran para llenar (defecto) */
  align-items: flex-start;   /* Arriba */
  align-items: flex-end;     /* Abajo */
  align-items: center;       /* Centrados verticalmente */
  align-items: baseline;     /* Alineados por la línea de texto */
}

El truco más usado de CSS: centrar algo

.contenedor {
  display: flex;
  justify-content: center;   /* Centra horizontalmente */
  align-items: center;       /* Centra verticalmente */
  height: 100vh;             /* Necesita una altura definida */
}

Tres líneas. Centrado perfecto horizontal y vertical. Antes de Flexbox, esto requería hacks complejos.

Pro tip

display: flex + justify-content: center + align-items: center es el truco más usado de CSS moderno. Memorízalo. Lo usarás cientos de veces.

---

gap — Espacio entre items

En vez de agregar márgenes a cada item, usa gap en el contenedor:

.contenedor {
  display: flex;
  gap: 1rem;         /* Espacio entre todos los items */
  gap: 1rem 2rem;    /* Vertical | Horizontal */
}

gap es más limpio que margin porque no agrega espacio extra al inicio ni al final, solo entre los items.

---

flex-wrap — Permitir saltos de línea

Por defecto, los flex items se comprimen para caber en una sola línea. Si quieres que salten a la siguiente línea cuando no caben:

.contenedor {
  display: flex;
  flex-wrap: wrap;       /* Los items saltan de línea */
  flex-wrap: nowrap;     /* Todo en una línea (defecto) */
}

Esto es fundamental para layouts responsive. Con flex-wrap: wrap, las tarjetas que no caben en una fila bajan a la siguiente.

---

Propiedades de los items

flex-grow — Crecer para llenar espacio

.item {
  flex-grow: 1;  /* Todos los items crecen por igual */
}

.item-principal {
  flex-grow: 2;  /* Este crece el doble que los demás */
}

flex-shrink — Encogerse cuando falta espacio

.item {
  flex-shrink: 0;  /* No se encoge (mantiene su tamaño) */
}

flex-basis — Tamaño base antes de crecer/encogerse

.item {
  flex-basis: 300px;  /* Empieza con 300px, luego crece o encoge */
}

Atajo flex

La forma abreviada de escribir flex-grow, flex-shrink y flex-basis:

.item {
  flex: 1;           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 0 0 300px;   /* No crece, no encoge, base 300px */
}

align-self — Alineación individual

Sobrescribe align-items para un item específico:

.item-especial {
  align-self: flex-end;  /* Solo este item va al fondo */
}

---

Patrones comunes con Flexbox

Navbar horizontal

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

Tarjetas en grid flexible

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px;  /* Crece, encoge, base 300px */
}

Footer al fondo de la página

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;  /* El main crece para empujar el footer abajo */
}

Centrar un elemento en toda la pantalla

.centrado {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

---

⌨️Ejercicio: Layout con Flexbox

Crea una página con un layout completo usando solo Flexbox.

1. Crea el HTML con esta estructura: <header> con logo y nav, <main> con 3 tarjetas de artículos, y <footer>.

2. El header: usa Flexbox para poner el logo a la izquierda y los enlaces de navegación a la derecha. Usa justify-content: space-between y align-items: center.

3. Las tarjetas: pon los 3 <article> en fila con Flexbox. Usa flex-wrap: wrap y gap: 1.5rem. Cada tarjeta debe tener flex: 1 1 280px para que sean flexibles.

4. El footer: ponlo al fondo de la página usando el truco del flex-direction: column en el body con min-height: 100vh y flex: 1 en el main.

5. Centra un título dentro de cada tarjeta usando display: flex, justify-content: center y align-items: center.

6. Prueba responsive: reduce el ancho de tu navegador. Las tarjetas deberían saltar a la siguiente línea automáticamente gracias a flex-wrap.

---

Resumen

• Flexbox se activa con display: flex en el contenedor padre.
• flex-direction define el eje principal (por defecto row = horizontal).
• justify-content alinea en el eje principal (center, space-between, space-evenly…).
• align-items alinea en el eje cruzado (center, flex-start, flex-end…).
• gap crea espacio entre items sin márgenes extra.
• flex-wrap: wrap permite que los items salten de línea.
• flex: 1 hace que un item crezca para llenar el espacio disponible.
• Centrar: display: flex + justify-content: center + align-items: center.

Fuente oficial: Flexbox en MDN — referencia completa con ejemplos interactivos de cada propiedad.

Siguiente capítuloCSS GridLayouts bidimensionales: filas y columnas como un profesional.

→