Content-flex

.content-flex posiciona contenido en una de nueve casillas (esquinas, bordes y centro) dentro de su contenedor. Pensado para heroes con overlay de texto, banners y cualquier bloque donde el contenido vive dentro de una caja con altura definida.

Cuándo usarlo

• Hero con imagen de fondo y título alineado a una esquina.
• Banners de campaña con CTA en una posición concreta.
• Tarjetas de portada en las que la jerarquía visual depende de la posición del texto.
• Cualquier bloque con min-height o aspect-ratio donde quieras controlar dónde cae el contenido.

Si el contenedor no tiene altura propia, el resultado de las posiciones verticales (top-*, bottom-*) se colapsa. Aplica min-height, aspect-ratio o asegúrate de que el padre fije la altura.

Uso básico

<section class="has-background bg-primary-900 min-h-[60vh]">
  <div class="content-flex bottom-left">
    <h2 class="display-sm">Abajo a la izquierda</h2>
    <p class="text-large">Subtítulo alineado coherentemente.</p>
  </div>
</section>

Combinable con block-bleed, aspect-ratio y cualquier utility de fondo.

Posiciones disponibles

Nueve casillas: tres ejes verticales (top, centro implícito, bottom) por tres horizontales (left, centro implícito, right).

Sin modificador, .content-flex por sí sola equivale a .center.

Cómo funciona por dentro

Vive en layouts/content-flex.css, dentro del layer layouts. Usa flexbox en columna con justify-content para el eje vertical y align-items para el horizontal. Además ajusta text-align y margin (mr-auto, mx-auto, ml-auto) para que el texto y los elementos hijos se alineen coherentemente con la casilla elegida.

.content-flex {
  @apply flex flex-col gap-content space-y-0;
  @apply justify-center items-center;
}

.content-flex.bottom-left {
  @apply justify-end items-start;
  @apply text-left mr-auto;
}

El gap entre hijos usa el token semántico gap-content (deriva de --spacing-content). Para variarlo puntualmente, sobrescribe con una utility (gap-block, gap-stack).

Variables relacionadas

• --spacing-content: gap interno entre hijos. Ver Espaciado.
• --spacing-section: padding del <section> que suele envolver al .content-flex. Ver Layouts.