Flexbox - Layout Moderno

Flexbox (Flexible Box Layout) revolucionó el diseño web cuando llegó. Antes, centrar un elemento vertical y horizontalmente requería trucos complicados. Con Flexbox: display: flex en el contenedor y luego justify-content: center; align-items: center. Listo, centrado perfecto en dos líneas.

Flexbox trabaja en una dimensión: fila (horizontal) o columna (vertical). El eje principal lo define flex-direction. justify-content distribuye en el eje principal (flex-start, flex-end, center, space-between, space-around). align-items alinea en el eje cruzado. flex-wrap permite que los elementos salten a la siguiente línea si no caben.

/* CONTENEDOR FLEX */
.contenedor {
  display: flex;           /* activa Flexbox */
  
  /* Dirección */
  flex-direction: row;     /* fila → (default) */
  flex-direction: column;  /* columna ↓ */
  
  /* Alineación en eje principal */
  justify-content: flex-start;    /* inicio */
  justify-content: flex-end;      /* final */
  justify-content: center;        /* centro */
  justify-content: space-between; /* espacio entre */
  justify-content: space-around;  /* espacio alrededor */
  
  /* Alineación en eje secundario */
  align-items: stretch;    /* estira (default) */
  align-items: flex-start; /* arriba */
  align-items: center;     /* centro */
  align-items: flex-end;   /* abajo */
  
  /* Otros */
  gap: 16px;          /* espacio entre elementos */
  flex-wrap: wrap;    /* permite salto de línea */
}

/* ELEMENTO FLEX */
.elemento {
  flex: 1;            /* toma espacio disponible */
  flex: 0 0 200px;    /* no crece, no encoge, 200px */
  align-self: center; /* alineación individual */
}