Layout con Flexbox

Flexbox es un sistema de layout unidimensional: trabaja en una dirección a la vez, ya sea fila o columna. Es ideal para distribuir elementos en una barra de navegación, una lista de tarjetas o cualquier grupo de elementos que necesita alinearse.

Activar Flexbox

Basta con añadir display: flex al contenedor padre:

.contenedor {
  display: flex;
}

Los hijos directos se convierten automáticamente en flex items y se colocan en fila por defecto.

Dirección: flex-direction

.contenedor {
  flex-direction: row;            /* fila → (por defecto) */
  flex-direction: row-reverse;    /* fila ← */
  flex-direction: column;         /* columna ↓ */
  flex-direction: column-reverse; /* columna ↑ */
}

Alineación en el eje principal: justify-content

Controla cómo se distribuyen los items en la dirección de flex-direction:

.contenedor {
  justify-content: flex-start;    /* al inicio (por 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 igual */
}

Alineación en el eje cruzado: align-items

Controla la alineación en la dirección perpendicular:

.contenedor {
  align-items: stretch;     /* estiran para llenar (por defecto) */
  align-items: flex-start;  /* al inicio del eje cruzado */
  align-items: flex-end;    /* al final */
  align-items: center;      /* centrados */
  align-items: baseline;    /* alineados por línea base del texto */
}

Centrado perfecto con dos líneas

.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

Salto de línea: flex-wrap

Por defecto, todos los items intentan caber en una línea:

.contenedor {
  flex-wrap: nowrap;  /* sin salto (por defecto) */
  flex-wrap: wrap;    /* salta a la siguiente línea si no caben */
}

Propiedades de los items

flex-grow

Cuánto espacio disponible puede ocupar el item (proporcionalmente):

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; } /* ocupa el doble que item-1 */

flex-shrink

Cuánto puede encogerse el item si no hay espacio:

.item { flex-shrink: 1; } /* se encoge (por defecto) */
.fijo { flex-shrink: 0; } /* nunca se encoge */

flex-basis

El tamaño base del item antes de que se aplique grow o shrink:

.item { flex-basis: 200px; }
.item { flex-basis: 33.33%; }

El shorthand: flex

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

align-self

Sobreescribe align-items para un item concreto:

.especial {
  align-self: flex-end;
}

Ejemplo práctico: barra de navegación

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 60px;
}

.nav-logo {
  font-weight: bold;
  font-size: 1.25rem;
}

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

Ejemplo práctico: rejilla de tarjetas

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

.tarjeta {
  flex: 1 1 280px; /* crece, se encoge, base 280px */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

En la siguiente lección veremos CSS Grid: el sistema bidimensional para layouts más complejos con filas y columnas simultáneas.