Flexbox desde cero

Qué es Flexbox?

Flexbox (Flexible Box Layout) es un sistema de layout CSS disenado para distribuir espacio y alinear elementos dentro de un contenedor, incluso cuando su tamaño es desconocido o dinámico.

Se activa con display: flex en el elemento padre. Todos sus hijos directos se convierten automaticamente en flex items.

Los dos ejes de Flexbox

Flexbox trabaja sobre dos ejes:

• Eje principal (main axis): definido por flex-direction. Por defecto es horizontal (de izquierda a derecha).
• Eje cruzado (cross axis): perpendicular al principal. Por defecto es vertical.

Entender estos ejes es fundamental porque justify-content alinea sobre el eje principal y align-items sobre el eje cruzado.

Propiedades del contenedor flex

flex-direction

Controla la dirección del eje principal:

justify-content (eje principal)

Distribuye los items a lo largo del eje principal:

align-items (eje cruzado)

Alinea los items en el eje cruzado:

flex-wrap

Por defecto, los flex items se comprimen en una sola linea. Con flex-wrap: wrap, pueden saltar a la siguiente linea cuando no hay espacio suficiente.

.contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

gap

Define el espacio entre flex items sin usar margin. Acepta uno o dos valores (fila y columna):

.contenedor {
  gap: 1rem;        /* Mismo espacio en ambos ejes */
  gap: 1rem 2rem;   /* 1rem vertical, 2rem horizontal */
}

Propiedades de los flex items

flex-grow, flex-shrink y flex-basis

Estas tres propiedades controlan como los items se expanden o comprimen:

• flex-grow: cuanto crece el item para llenar espacio sobrante (defecto: 0)
• flex-shrink: cuanto se encoge si no hay espacio suficiente (defecto: 1)
• flex-basis: tamaño base antes de distribuir espacio (defecto: auto)

El shorthand flex

La propiedad flex combina las tres:

.item { flex: 1; }           /* grow:1, shrink:1, basis:0 */
.item { flex: 0 0 200px; }   /* Tamano fijo de 200px */
.item { flex: 2 1 auto; }    /* Crece el doble, se encoge, base automática */

align-self

Permite que un item individual se alinee diferente al resto en el eje cruzado:

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

order

Cambia el orden visual de un item sin modificar el HTML:

.primero { order: -1; } /* Aparece antes que los demas */
.último  { order: 99; } /* Aparece al final */

Patrones comunes con Flexbox

Centrado perfecto

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

Footer pegado al fondo

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

Cards responsivas sin media queries

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px; /* Minimo 300px, crece si hay espacio */
}

Flexbox domina los layouts unidimensionales. En la siguiente leccion aprenderemos CSS Grid, que lleva los layouts bidimensionales a otro nivel.

Práctica

1. Construye una navbar con Flexbox: Crea una barra de navegacion con un logo a la izquierda y links a la derecha usando display: flex, justify-content: space-between y align-items: center.
2. Centra un elemento vertical y horizontalmente: Usa un contenedor flex con justify-content: center y align-items: center para centrar una caja en el viewport completo.
3. Crea cards responsivas con flex-wrap: Construye una grilla de tarjetas usando flex-wrap: wrap y flex: 1 1 300px para que se adapten automaticamente sin media queries.